Main Nav

No description available

---
import MainNav from "@components/navigation/main-nav/main-nav.astro";
import Button from "@components/building-blocks/core-elements/button.astro";
---

<MainNav
buttonSections={
  [
    {
      "_component": "building-blocks/core-elements/button",
      "link": "#",
      "variant": "ghost",
      "size": "lg",
      "text": "Search",
      "iconName": "magnifying-glass",
      "hideText": true
    },
    {
      "_component": "building-blocks/core-elements/button",
      "link": "#",
      "text": "Careers",
      "variant": "ghost",
      "iconName": "arrow-top-right-on-square",
      "iconPosition": "after",
      "_target": "blank",
      "rel": "noopener noreferrer"
    }
  ]
} logoAlt="Logo" logoSource="/src/assets/images/component-library/logo.svg" navData={
  [
    {
      "name": "Home",
      "path": "#",
      "children": []
    },
    {
      "name": "Resources",
      "path": "#",
      "children": [
        {
          "name": "Blog",
          "path": "#",
          "children": []
        },
        {
          "name": "Documentation",
          "path": "#",
          "children": []
        },
        {
          "name": "Support",
          "path": "#",
          "children": []
        }
      ]
    },
    {
      "name": "Contact",
      "path": "#",
      "children": []
    }
  ]
}
/>
---
blocks:
  _component: navigation/main-nav
  logoSource: /src/assets/images/component-library/logo.svg
  logoAlt: Logo
  navData:
    - name: Home
      path: '#'
      children: []
    - name: Resources
      path: '#'
      children:
        - name: Blog
          path: '#'
          children: []
        - name: Documentation
          path: '#'
          children: []
        - name: Support
          path: '#'
          children: []
    - name: Contact
      path: '#'
      children: []
  buttonSections:
    - _component: building-blocks/core-elements/button
      link: '#'
      variant: ghost
      size: lg
      text: Search
      iconName: magnifying-glass
      hideText: true
    - _component: building-blocks/core-elements/button
      link: '#'
      text: Careers
      variant: ghost
      iconName: arrow-top-right-on-square
      iconPosition: after
      _target: blank
      rel: noopener noreferrer
---

Overview

A complete header navigation component that combines a logo, navigation links, and action buttons. Includes Bar and Mobile for responsive layouts that automatically switch between desktop and mobile views.

Properties

No properties available. Make sure the component has a valid .cloudcannon.structure-value.yml file.