Back to site

Mobile

Mobile navigation with full-screen overlay.

---
import Mobile from "@navigation/mobile/Mobile.astro";
---

<Mobile
logoAlt="null" logoSource="null" navData={
  [
    {
      "name": "Home",
      "path": "#",
      "children": []
    },
    {
      "name": "Products",
      "path": "#",
      "children": [
        {
          "name": "All Products",
          "path": "#",
          "children": []
        },
        {
          "name": "Categories",
          "path": "#",
          "children": [
            {
              "name": "Electronics",
              "path": "#"
            },
            {
              "name": "Clothing",
              "path": "#"
            },
            {
              "name": "Home & Garden",
              "path": "#"
            }
          ]
        },
        {
          "name": "Best Sellers",
          "path": "#",
          "children": []
        },
        {
          "name": "New Arrivals",
          "path": "#",
          "children": []
        }
      ]
    },
    {
      "name": "Services",
      "path": "#",
      "children": [
        {
          "name": "Consulting",
          "path": "#",
          "children": []
        },
        {
          "name": "Support",
          "path": "#",
          "children": []
        },
        {
          "name": "Training",
          "path": "#",
          "children": []
        }
      ]
    },
    {
      "name": "Resources",
      "path": "#",
      "children": [
        {
          "name": "Blog",
          "path": "#",
          "children": []
        },
        {
          "name": "Documentation",
          "path": "#",
          "children": []
        },
        {
          "name": "Videos",
          "path": "#",
          "children": []
        },
        {
          "name": "Help Center",
          "path": "#",
          "children": []
        }
      ]
    },
    {
      "name": "About",
      "path": "#",
      "children": [
        {
          "name": "Our Story",
          "path": "#",
          "children": []
        },
        {
          "name": "Team",
          "path": "#",
          "children": []
        },
        {
          "name": "Careers",
          "path": "#",
          "children": []
        }
      ]
    },
    {
      "name": "Contact",
      "path": "#",
      "children": []
    }
  ]
}
/>
---
blocks:
  _component: navigation/mobile
  logoSource: null
  logoAlt: null
  navData:
    - name: Home
      path: '#'
      children: []
    - name: Products
      path: '#'
      children:
        - name: All Products
          path: '#'
          children: []
        - name: Categories
          path: '#'
          children:
            - name: Electronics
              path: '#'
            - name: Clothing
              path: '#'
            - name: Home & Garden
              path: '#'
        - name: Best Sellers
          path: '#'
          children: []
        - name: New Arrivals
          path: '#'
          children: []
    - name: Services
      path: '#'
      children:
        - name: Consulting
          path: '#'
          children: []
        - name: Support
          path: '#'
          children: []
        - name: Training
          path: '#'
          children: []
    - name: Resources
      path: '#'
      children:
        - name: Blog
          path: '#'
          children: []
        - name: Documentation
          path: '#'
          children: []
        - name: Videos
          path: '#'
          children: []
        - name: Help Center
          path: '#'
          children: []
    - name: About
      path: '#'
      children:
        - name: Our Story
          path: '#'
          children: []
        - name: Team
          path: '#'
          children: []
        - name: Careers
          path: '#'
          children: []
    - name: Contact
      path: '#'
      children: []
---

Overview

A mobile navigation component that opens as a full-screen overlay with expandable menu sections. Optimized for touch interactions. Commonly used inside Main Nav for mobile layouts.

Properties

logoSource string

Path to the logo image.

logoAlt string

Alternative text for the logo image.

navData array | default: array

Array of navigation items with name, path, and optional children (up to 3 levels).

Item Properties:

name string

The display text for the navigation item.

path string

The URL/path for the navigation item.

children array

Optional nested navigation items (level 2).

Item Properties:

name string

The display text for the navigation item.

path string

The URL/path for the navigation item.

children array

Optional nested navigation items (level 3, final level).

Item Properties:

name string

The display text for the navigation item.

path string

The URL/path for the navigation item.