Skip to main content Skip to docs navigation

Navigation bar components that provide primary site navigation with links, branding, and interactive elements for consistent horizontal navigation interfaces.

This documentation is a work in progress and may contain incomplete or outdated information. If you have any feedback or suggestions, please open an issue on GitHub.

Props

Configurable properties that control the appearance, behavior, and functionality of navbar components for primary navigation interfaces.

Properties that define the visual state and interactive behavior of individual navigation link elements within the navbar.

Navbar example image Navbar example image

state variant

Controls the interactive state and visual feedback of the nav link based on user interaction and current navigation context.

  • idle
  • hover
  • active
  • disabled

has-icon boolean

Controls the visibility of an icon element positioned before the navigation link label.

  • true
  • false

icon-instance instance-swap

has-icon:
true

Specifies which icon component to display when has-icon property is enabled.

  • Icon Placeholder

has-text boolean

Controls the visibility of the text label within the navigation link element.

  • true
  • false

has-badge boolean

Controls the visibility of a badge element for displaying counts or notifications on the nav link.

  • true
  • false

is-dropdown boolean

Controls the visibility of a dropdown indicator that signals available submenu navigation options.

  • true
  • false

Properties that define the scale, expansion state, and feature configuration of the navbar container.

Navbar example image Navbar example image

size variant

Controls the dimensional scale and content presentation of the navbar to optimize usability across different layout requirements.

  • large
  • small

is-expanded boolean

size:
small

Controls the expansion state of the navbar, determining whether the navigation menu is shown in its expanded or collapsed presentation.

  • true
  • false