Navbar

The Navbar component renders a navigation bar with customizable icons.

Usage

Default


<Navbar
  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" }
  ]}
  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 should have a label, icon, and path).
theme	"primary" \| "secondary" \| "tertiary" \| "quaternary" \| "clear"	Configured Default	Theme for 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.
data-testid	string	"nav-bar"	Test id for querying the component in tests.