Main Nav

Header navigation combining logo, links, and actions.

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

<MainNav
buttonSections={
  [
    {
      "_component": "building-blocks/core-elements/button",
      "link": "#",
      "variant": "ghost",
      "size": "lg",
      "text": "Search",
      "hideText": true,
      "iconName": "magnifying-glass"
    },
    {
      "_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
      hideText: true
      iconName: magnifying-glass
    - _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

logoSource string

Logo image source URL or path. Leave empty to hide the logo.

logoAlt string | default: Logo

Alt text for the logo image for accessibility.

navData array | default: array

Array of navigation items to render in the navigation bar.

Item Properties:

name string

Display text for the navigation item.

path string

URL path for the navigation item.

children array | default: array

Child navigation items for dropdown menus.

Item Properties:

name string

Display text for the child navigation item.

path string

URL path for the child navigation item.

children array | default: array

Grandchild navigation items for nested dropdowns.

Item Properties:

name string

Display text for the grandchild navigation item.

path string

URL path for the grandchild navigation item.

buttonSections array | default: array

Array of button components to display in the navigation bar. See the Button component documentation for more information.