# MobileMenu

> Full-screen mobile navigation drawer with nested support

Canonical URL: https://fa7e86e3d553:3005/islands/navigation/mobile-menu

> Full-screen mobile navigation drawer. Triggered by Navbar hamburger. Supports nested menu items.

## Preview

**Category**: Navigation

## Props

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| links | array | yes | - | Array of link objects with label, url, children (optional nested array) |
| socials | array | no | - | Array of social objects with platform and url |
| logo | object | no | - | Logo object with src and alt (optional) |

## Embed Example

```html
<lx-island name="MobileMenu">
  <script type="application/json">
{
  "links": [
    {
      "label": "example-label",
      "url": "example-url"
    }
  ]
}
  </script>
</lx-island>
```

## Usage Patterns

Place in a **hidden section** — Navbar automatically triggers it on hamburger click:

```html
<lx-island name="MobileMenu">
  <script type="application/json">
{
  "links": [
    {
      "label": "example-label",
      "url": "example-url"
    }
  ]
}
  </script>
</lx-island>
```

**Nested navigation:**

```html
{"links":[
  {"label":"Shop","url":"/collections","children":[
    {"label":"Skincare","url":"/collections/skincare","children":[
      {"label":"Serums","url":"/collections/serums"},
      {"label":"Moisturizers","url":"/collections/moisturizers"}
    ]}
  ]},
  {"label":"About","url":"/about"}
]}
```

## Tips

- **Triggered automatically** by Navbar hamburger icon — no manual wiring needed
- Supports **3 levels of nesting** (parent → child → grandchild)
- socials prop shows social icons at bottom of menu (platform: instagram, facebook, twitter, tiktok, youtube)
- logo prop displays logo at top of mobile drawer (optional)
- Full-screen overlay on mobile, slide-in animation
- Include once per page (pair with Navbar)

## Stylable Parts

Target internal elements via `data-part` selectors in section CSS:

| Part | Description |
|------|-------------|
| `root` | Outermost container |

```css
/* Example: custom styling */
[data-section-id='SECTION'] [data-part='root'] {
  border-radius: 1rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
```

## Related Islands

- [Navbar](/islands/navigation/navbar) — Navbar triggers MobileMenu on hamburger click
- [AnnouncementBar](/islands/navigation/announcement-bar) — Place above navbar for site-wide announcements