Bar
No description available
---
import Bar from "@components/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
No properties available. Make sure the component has a valid .cloudcannon.structure-value.yml file.