---
title: Mobile Menu
description: "Astro mobile navigation panels with labelled triggers and grouped links."
seo:
    title: "Astro Mobile Menu blocks — examples and composition"
---

This block uses the [Drawer](/components/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.

```astro
---
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>
```

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

## Installation

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

## Header option

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

```astro
<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

<table>
	<thead>
		<tr>
			<th>Prop</th>
			<th>Default</th>
			<th>Use</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>
				<code>navigation</code>
			</td>
			<td>required</td>
			<td>
				Links with <code>label</code>, <code>href</code>, optional <code>icon</code>,{" "}
				<code>active</code>, and <code>links</code>
			</td>
		</tr>
		<tr>
			<td>
				<code>buttons</code>
			</td>
			<td>
				<code>[]</code>
			</td>
			<td>
				Action links with optional <code>icon</code> and Button <code>variant</code>
			</td>
		</tr>
		<tr>
			<td>
				<code>title</code>
			</td>
			<td>
				<code>"Menu"</code>
			</td>
			<td>Accessible drawer title</td>
		</tr>
		<tr>
			<td>
				<code>description</code>
			</td>
			<td>
				<code>"Site navigation and actions."</code>
			</td>
			<td>
				Supporting text; use <code>""</code> to omit it
			</td>
		</tr>
		<tr>
			<td>
				<code>triggerLabel</code>
			</td>
			<td>
				<code>"Open menu"</code>
			</td>
			<td>Accessible trigger label</td>
		</tr>
		<tr>
			<td>
				<code>position</code>
			</td>
			<td>
				<code>"bottom"</code>
			</td>
			<td>
				<code>"bottom"</code>, <code>"top"</code>, <code>"left"</code>, or{" "}
				<code>"right"</code>
			</td>
		</tr>
		<tr>
			<td>
				<code>variant</code>
			</td>
			<td>
				<code>"default"</code>
			</td>
			<td>
				<code>"default"</code>, <code>"straight"</code>, or <code>"inset"</code>
			</td>
		</tr>
		<tr>
			<td>
				<code>closeOnMedia</code>
			</td>
			<td>—</td>
			<td>Media query that closes the drawer</td>
		</tr>
	</tbody>
</table>

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](/blocks/header) for the complete shell and [Sheet](/components/sheet) or [Drawer](/components/drawer) for lower-level panel composition.