Navigation / COMPONENT

Mobile Menu Dock

A compact mobile navigation dock with live component search, a filtered section menu, and a small credit to its design inspiration.

Live preview

Type to filter components

View the Mobile Menu Dock source on GitHub

How it works

Typing filters component names, categories, and descriptions and links to matching component pages. With an empty query, the menu shows the supplied site navigation links.

Accessibility

The search field and menu toggle have accessible labels. Results are links, Escape closes the menu, and panel transitions respect reduced-motion preferences.

Limitations

Search only filters the supplied component records and follows each record’s href. It does not discover routes or fetch a remote catalog.

Features

  • Combines a component search field and a compact menu toggle in a fixed mobile dock.
  • Searches component names, categories, and descriptions, then links directly to each component page.
  • Lists the supplied site navigation items when the menu is opened without a search query.
  • Supports an active navigation item, safe-area spacing, reduced motion, and Escape to close.
  • Includes an optional className for positioning and responsive display.
  • Credits Chánh Đại as the visual inspiration in the Components section, outside the reusable component.

Installation

Choose the CLI command or install the component manually.

Package manager
$ npx @istmx/ui add mobile-menu-dock

Copies the install command for your selected package manager.

Dependencies

ReactMotionTailwind CSSclsxtailwind-merge@tabler/icons-react

Usage

Import the component from the file you copied it to, then use it like any other React component.

Usage
import MobileMenuDock from '@/components/ui/mobile-menu-dock'
 
const navigationItems = [
  { label: 'About', href: '/#about' },
  { label: 'Projects', href: '/#projects' },
  { label: 'Components', href: '/library', active: true },
  { label: 'Blog', href: '/blogs' },
]
 
const components = [
  {
    name: 'Animated Text',
    slug: 'animated-text',
    href: '/library/animated-text',
    category: 'Text',
    description: 'Composable text effects.',
  },
]
 
<MobileMenuDock items={navigationItems} searchItems={components} />

Composition

Composition
MobileMenuDock
├── Filterable menu panel
│   └── Navigation or component results
└── Search field + menu toggle

API reference

itemsMobileMenuDockItem[]

Navigation entries with a label, href, and optional active state.

searchItemsMobileMenuDockSearchItem[]

Component entries with name, slug, href, category, and description fields used by the live search.

label?string

Accessible label for the expanded navigation landmark. Defaults to Mobile navigation.

placement?"fixed" | "inline"

Choose a safe-area-aware fixed mobile dock or inline placement for previews and embedded layouts. Defaults to fixed.

className?string

Classes applied to the fixed dock wrapper, useful for positioning and visibility breakpoints.

The listed props match the current component implementation.

Data attributes

Mobile Menu Dock does not expose custom data attributes.

Examples

On phones, type a component name or category to open matching Library results. Clear the query to show the site links, or use the grid button to toggle the menu. Escape closes the menu.

Credits & inspiration

The mobile menu and search interaction is inspired by Chánh Đại. This ISTMX version adapts that idea with searchable component results and a source-first implementation created by Aryan (istmX). The copy-and-own philosophy is inspired by shadcn/ui.