Navbar

Sticky top navigation bar with a brand area on the left, content slots on the right, and an optional decorative ticker line.

Basic Navbar

Preview

With Ticker and Actions

Preview

Props

PropTypeDefaultDescription
brandReactNode-Content rendered in the left brand area. Typically a logo or text.
tickerstring-When provided, renders a subtle gradient line at the bottom of the navbar.
childrenReactNode-Content rendered in the right section, typically navigation links or action buttons.
classNamestring-Additional CSS classes to apply to the nav element.

Accessibility

  • Renders as a semantic <nav> element for assistive technology.
  • Uses sticky positioning so it remains visible when scrolling.
  • Navigation links inside the navbar should use proper anchor tags or accessible link components.
  • Consider adding an aria-label such as "Main navigation" for screen readers when multiple navs are present.