Navbar

The Navbar component renders a horizontal navigation bar with icons, theme styling, and consumer-controlled active state matching.

Usage & Examples

default.tsx

const items = [
  { icon: <FaHome />, label: "Home", path: "/" },
  { icon: <FaCompactDisc />, label: "Music", path: "/music" },
  { icon: <FaImage />, label: "Images", path: "/photography" },
  { icon: <FaCode />, label: "Code", path: "/code" },
  { icon: <FaCommentAlt />, label: "Blog", path: "/blog" },
  { icon: <FaPaintBrush />, label: "Design", path: "/design" }
];

const currentPath = "/code/project-one";

const normalizePath = (p: string) =>
  p.endsWith("/") && p.length > 1 ? p.slice(0, -1) : p;

const isItemActive = (item) => {
  const itemPath = normalizePath(item.path);
  const activePath = normalizePath(currentPath);

  if (itemPath === "/") {
    return activePath === "/";
  }

  return activePath === itemPath || activePath.startsWith(`${itemPath}/`);
};

<Navbar
  items={items}
  isItemActive={isItemActive}
  theme="primary"
  rounding="full"
  shadow="light"
/>

Props API

20 props
Columns
Navbar props API
Default
Description
aria-describedbystringNoaria—Optional ID of an element that describes this navigation landmark.
aria-labelstringNoaria"Main navigation"Accessible label for the navigation landmark. Defaults to "Main navigation".
aria-labelledbystringNoaria—Optional ID of an external element that labels this navigation landmark. Prefer this when the nav is visually labelled by a heading.
classNamestringNostyling—Optional extra class name(s) for custom styling.
data-testidstringNotesting—Backward-compatible alias for test ID attributes.
getItemAriaLabel((item: NavItem) => string)Noevents—Optional callback to provide a custom accessible label for each nav item. Falls back to the item label when not provided.
glassbooleanNopropsconfigured default glass setting (fallback: false)Adds translucent glass styling to nav items.
iconClassNamestringNoprops—Additional class names for each icon wrapper.
isItemActive((item: NavItem) => boolean)Noevents—Optional callback used to determine whether a nav item should be styled as active.
itemClassNamestringNoprops—Additional class names for each nav link.
itemsNavItem[]Yesprops—Array of navigation items to render in the NavBar.
labelClassNamestringNoprops—Additional class names for each label.