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.

Examples #