Back to site

Bar

Horizontal navigation bar with dropdown menus.

---
import Bar from "@navigation/bar/Bar.astro";
---

<Bar
navData={
  [
    {
      "name": "Home",
      "path": "#",
      "children": []
    },
    {
      "name": "Products",
      "path": "#",
      "children": [
        {
          "name": "All Products",
          "path": "#all-products",
          "children": []
        },
        {
          "name": "Categories",
          "path": "#categories",
          "children": [
            {
              "name": "Electronics",
              "path": "#electronics"
            },
            {
              "name": "Clothing",
              "path": "#clothing"
            },
            {
              "name": "Home & Garden",
              "path": "#home-garden"
            }
          ]
        },
        {
          "name": "Best Sellers",
          "path": "#best-sellers",
          "children": []
        }
      ]
    },
    {
      "name": "Services",
      "path": "#",
      "children": [
        {
          "name": "Consulting",
          "path": "#consulting",
          "children": []
        },
        {
          "name": "Support",
          "path": "#support",
          "children": []
        },
        {
          "name": "Training",
          "path": "#training",
          "children": []
        }
      ]
    },
    {
      "name": "Resources",
      "path": "#resources",
      "children": [
        {
          "name": "Blog",
          "path": "#blog",
          "children": []
        },
        {
          "name": "Documentation",
          "path": "#documentation",
          "children": []
        },
        {
          "name": "Videos",
          "path": "#videos",
          "children": []
        }
      ]
    },
    {
      "name": "Contact",
      "path": "#contact",
      "children": []
    }
  ]
}
/>
---
blocks:
  _component: navigation/bar
  navData:
    - name: Home
      path: '#'
      children: []
    - name: Products
      path: '#'
      children:
        - name: All Products
          path: '#all-products'
          children: []
        - name: Categories
          path: '#categories'
          children:
            - name: Electronics
              path: '#electronics'
            - name: Clothing
              path: '#clothing'
            - name: Home & Garden
              path: '#home-garden'
        - name: Best Sellers
          path: '#best-sellers'
          children: []
    - name: Services
      path: '#'
      children:
        - name: Consulting
          path: '#consulting'
          children: []
        - name: Support
          path: '#support'
          children: []
        - name: Training
          path: '#training'
          children: []
    - name: Resources
      path: '#resources'
      children:
        - name: Blog
          path: '#blog'
          children: []
        - name: Documentation
          path: '#documentation'
          children: []
        - name: Videos
          path: '#videos'
          children: []
    - name: Contact
      path: '#contact'
      children: []
---

Overview

Displays a horizontal navigation bar with dropdown menus for organizing multi-level links. Typically used inside Main Nav for desktop layouts.

Properties

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.