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

Sortable data table
Prop	Type	Default	Description
items	Array<{ label: string; icon?: ReactNode; path: string }>	-	Navigation items to render. Each item includes a label, path, and optional icon.
isItemActive	(item: NavItem) => boolean	-	Optional callback used to determine whether a navigation item should be styled as active. This allows the consumer app to control active route matching.
theme	"primary" \| "secondary" \| "tertiary" \| "quaternary" \| "clear"	Configured Default	Theme for the navigation bar.
rounding	"none" \| "small" \| "medium" \| "large"	Configured Default	Border radius for navigation items.
shadow	"none" \| "light" \| "medium" \| "strong" \| "intense"	Configured Default	Shadow depth for navigation items.
className	string	-	Custom class names for the navigation wrapper.
data-testid	string	"nav-bar"	Test id for querying the component in tests.