Nav Root

Navigation root component

_bookshop_name: navigation/nav-root
variant: horizontal
navBlocks:
  - _bookshop_name: navigation/nav-list
    navBlocks:
      - _bookshop_name: navigation/nav-item
        href: '#'
        label: Home
      - _bookshop_name: navigation/nav-item
        href: '#'
        label: About
      - _bookshop_name: navigation/nav-item
        label: Resources
        href: '#'
      - _bookshop_name: navigation/nav-item
        label: Help
        href: '#'
      - _bookshop_name: navigation/nav-item
        href: '#'
        label: Contact

Properties

variant enum | default: bar

The variant style of the navigation.

Accepted values:
  • horizontal
  • sidebar
  • mobile

navBlocks string | default: array

Examples

Navigation Variants

_bookshop_name: navigation/nav-root
variant: sidebar
navBlocks:
  - _bookshop_name: navigation/nav-list
    navBlocks:
      - _bookshop_name: navigation/nav-item
        href: '#'
        label: Home
      - _bookshop_name: navigation/nav-item
        href: '#'
        label: About
      - _bookshop_name: navigation/nav-item
        label: Resources
        navBlocks:
          - _bookshop_name: navigation/nav-list
            navBlocks:
              - _bookshop_name: navigation/nav-item
                href: '#'
                label: Blog
              - _bookshop_name: navigation/nav-item
                href: '#'
                label: Docs
      - _bookshop_name: navigation/nav-item
        label: Help
        navBlocks:
          - _bookshop_name: navigation/nav-list
            navBlocks:
              - _bookshop_name: navigation/nav-item
                href: '#'
                label: FAQ
              - _bookshop_name: navigation/nav-item
                href: '#'
                label: Support
              - _bookshop_name: navigation/nav-item
                href: '#'
                label: Guides
      - _bookshop_name: navigation/nav-item
        href: '#'
        label: Contact
_bookshop_name: navigation/nav-root
variant: horizontal
navBlocks:
  - _bookshop_name: navigation/nav-list
    navBlocks:
      - _bookshop_name: navigation/nav-item
        href: '#'
        label: Home
      - _bookshop_name: navigation/nav-item
        href: '#'
        label: About
      - _bookshop_name: navigation/nav-item
        label: Resources
        navBlocks:
          - _bookshop_name: navigation/nav-list
            navBlocks:
              - _bookshop_name: navigation/nav-item
                href: '#'
                label: Blog
              - _bookshop_name: navigation/nav-item
                href: '#'
                label: Docs
      - _bookshop_name: navigation/nav-item
        label: Help
        navBlocks:
          - _bookshop_name: navigation/nav-list
            navBlocks:
              - _bookshop_name: navigation/nav-item
                href: '#'
                label: FAQ
              - _bookshop_name: navigation/nav-item
                href: '#'
                label: Support
              - _bookshop_name: navigation/nav-item
                href: '#'
                label: Guides
      - _bookshop_name: navigation/nav-item
        href: '#'
        label: Contact
_bookshop_name: navigation/nav-root
variant: mobile
navBlocks:
  - _bookshop_name: navigation/nav-list
    navBlocks:
      - _bookshop_name: navigation/nav-item
        href: '#'
        label: Home
      - _bookshop_name: navigation/nav-item
        href: '#'
        label: About
      - _bookshop_name: navigation/nav-item
        label: Resources
        navBlocks:
          - _bookshop_name: navigation/nav-list
            navBlocks:
              - _bookshop_name: navigation/nav-item
                href: '#'
                label: Blog
              - _bookshop_name: navigation/nav-item
                href: '#'
                label: Docs
      - _bookshop_name: navigation/nav-item
        label: Help
        navBlocks:
          - _bookshop_name: navigation/nav-list
            navBlocks:
              - _bookshop_name: navigation/nav-item
                href: '#'
                label: FAQ
              - _bookshop_name: navigation/nav-item
                href: '#'
                label: Support
              - _bookshop_name: navigation/nav-item
                href: '#'
                label: Guides
      - _bookshop_name: navigation/nav-item
        href: '#'
        label: Contact