Navbar

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

Usage

Default


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

Data table
	Type	Description
aria-describedby	string	Optional ID of an element that describes this navigation landmark.
aria-label	string	Accessible label for the navigation landmark. Defaults to "Main navigation".
aria-labelledby	string	Optional ID of an external element that labels this navigation landmark. Prefer this when the nav is visually labelled by a heading.
className	string	Optional extra class name(s) for custom styling.
data-testid	string	Optional test ID for testing frameworks.
getItemAriaLabel	((item: NavItem) => string)	Optional callback to provide a custom accessible label for each nav item. Falls back to the item label when not provided.
isItemActive	((item: NavItem) => boolean)	Optional callback used to determine whether a nav item should be styled as active.
items	NavItem[]	Array of navigation items to render in the NavBar.
list-aria-label	string	Optional accessible label for the internal navigation list. Usually not required, but useful in complex layouts.
rounding	RoundingType	Optional rounding to apply to the NavBar. One of: "none" \| "small" \| "medium" \| "large" \| "full"
shadow	ShadowType	Optional shadow to apply to the NavBar. One of: "none" \| "light" \| "medium" \| "strong" \| "intense"
theme	ThemeType	Optional theme class names to apply to the NavBar. One of: "primary" \| "secondary" \| "tertiary" \| "quaternary" \| "clear"