Navbar

Renders a header.navbar and enhances a hand-authored .navbar-toggle (hamburger) and .navbar-mobile (mobile menu panel) inside it — resize-to-desktop auto-close, scroll shadow, outside-click/Escape, and URL-based active-link detection. A full set of compound subcomponents removes the markup boilerplate, but hand-authoring the raw .navbar-* tree (documented in MARKUP.md) works exactly the same — Navbar only ever looks for .navbar-toggle and .navbar-mobile by class name.

Usage


import {
  Navbar, NavbarContainer, NavbarBrand, NavbarSpacer,
  NavbarNav, NavbarLink, NavbarToggle,
} from '@mav-labs-inc/mavkit-react'
 
<Navbar>
  <NavbarContainer>
    <NavbarBrand href="/" logo="M">MavKit</NavbarBrand>
    <NavbarSpacer />
    <NavbarNav>
      <NavbarLink href="/">Home</NavbarLink>
    </NavbarNav>
    <NavbarToggle />
  </NavbarContainer>
</Navbar>

Example

Props

Prop	Type	Default	Description
onOpened	() => void	—
onClosed	() => void	—
className	string	—
children	ReactNode	—
ref	Ref<NavbarHandle>	—	{ openMenu(), closeMenu(), toggleMenu(), isOpen }

NavbarContainer

Required — the only flex/grid row inside Navbar. NavbarBrand, NavbarNav, NavbarToggle, etc. all need to live inside it or they render as unstyled block children.

Prop	Type	Default	Description
layout	'flex' \| '3col'	'flex'	'3col' adds the logo / search / actions 3-column layout (search-bar variant).
className	string	—

NavbarBrand

Prop	Type	Default	Description
href*	string	—
logo	ReactNode	—	Rendered inside .navbar-logo — a letter, <img>, or inline SVG.
children	ReactNode	—	Rendered inside .navbar-wordmark.

Also accepts every native <a> attribute.

NavbarNav

Prop	Type	Default	Description
ariaLabel	string	'Main navigation'
className	string	—

NavbarLink

Prop	Type	Default	Description
href*	string	—
active	boolean	—	Marks this link as the current page. Navbar also auto-detects this by URL match — only needed to override that.
disabled	boolean	—

Also accepts every native <a> attribute.

NavbarToggle

Reads open state from the enclosing Navbar; clicks are handled by Navbar itself via event delegation, so no onClick wiring is needed.

Prop	Type	Default	Description
children	ReactNode	—	Overrides the built-in three-bar hamburger icon.

Also accepts every native <button> attribute except className/type. Pass aria-controls yourself if toggling a hand-authored .navbar-mobile panel.

NavbarActions

Prop	Type	Default	Description
className	string	—

NavbarDivider

A thin vertical rule between link groups and actions. Accepts only className.

NavbarSearch

Prop	Type	Default	Description
id	string	—	Auto-generated if omitted.
label	string	'Search'	Visually-hidden accessible label.
icon	ReactNode	—	Overrides the built-in magnifier icon.

Also accepts every native <input> attribute except className/type/id.

NavbarIconButton

Prop	Type	Default	Description
ariaLabel*	string	—	The button has no visible text, only the icon.
badge	ReactNode	—	Rendered inside .navbar-badge (e.g. an unread count) — wraps the button in .navbar-icon-wrap automatically.

Also accepts every native <button> attribute except className/type.

NavbarSpacer

flex: 1 — pushes everything after it to the right. Takes no props.

`useNavbar()`

Access the enclosing Navbar controller ({ isOpen }) — mainly useful for building a custom toggle.