Mobile Menu

Astro mobile navigation panels with labelled triggers and grouped links.

This block uses the Drawer component. It renders real links and closes after link selection. It supports active links and one level of child links. The footer contains the action buttons and the default slot.

---
import MobileMenuBlock from "@/components/blocks/mobile-menu/mobile-menu-1.astro"
---

<div class="flex items-center justify-between p-4">
  <span class="font-semibold">Acme</span>
  <MobileMenuBlock
    title="Explore Acme"
    navigation={[
      { label: "Home", href: "#home", active: true },
      { label: "Products", href: "#products", links: [
        { label: "Analytics", href: "#analytics", icon: "chart-no-axes-column" },
        { label: "Integrations", href: "#integrations", icon: "plug" },
      ] },
      { label: "Resources", href: "#resources" },
      { label: "Pricing", href: "#pricing" },
    ]}
    buttons={[
      { label: "Get started", href: "#start" },
      { label: "Sign in", href: "#signin", variant: "outline" },
    ]}
  />
</div>

bunx shadcn@latest add @gnosticai/mobile-menu-1

npx shadcn@latest add @gnosticai/mobile-menu-1

pnpm dlx shadcn@latest add @gnosticai/mobile-menu-1

Installation

bunx --bun shadcn@latest add @gnosticai/mobile-menu-1

Header option

All five header blocks accept mobileMenu="drawer". They use the same navigation data and pass buttons and slot="mobile" to this block. The default remains mobileMenu="sheet".

<HeaderBlock
  logo={logo}
  navigation={navigation}
  buttons={buttons}
  mobileMenu="drawer"
>
  <a slot="mobile" href="/support">Support</a>
</HeaderBlock>

The header hides the trigger at 1024px and closes an open drawer at that width.

Props

The standalone block has no breakpoint restriction. Use class="lg:hidden" and closeOnMedia="(min-width: 1024px)" when you pair it with desktop navigation. Custom footer links can use DrawerClose as="a" to close on selection.

Choose a mobile menu layout

Choose a mobile menu for navigation that does not fit the desktop header at smaller widths. Keep its destinations aligned with the desktop navigation.

Pass content from Astro

Pass navigation groups, optional action buttons, and trigger/title labels. Position and variant props change the panel layout. Use closeOnMedia where supported to close a panel when the page returns to a desktop layout.

Responsive layout and images

Test opening, Escape, link activation, and focus return with a keyboard. A menu with many links needs scrolling that leaves the close control reachable. Logo or icon artwork needs a text name when it is the only visible mark.

Compose the next section

Use Header for the complete shell and Sheet or Drawer for lower-level panel composition.