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.
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.
linkContentClassNamestringNoprops—Additional class names for each link content wrapper.