Components

Developers

Navigation Bar

Navigation Bar
In this article

Renders a navigation bar that contains multiple NavigationBarItem components.

Usage
Props
import { IconHome, IconUser, IconSettings } from '@tabler/icons-react';
import { NavigationBar } from "@/ui/navigation/navigation-bar/components/NavigationBar";

export const MyComponent = () => {

   const navigationItems = [
     {
       name: "Home",
       Icon: IconHome,
       onClick: () => console.log("Home clicked"),
     },
     {
       name: "Profile",
       Icon: IconUser,
       onClick: () => console.log("Profile clicked"),
     },
     {
       name: "Settings",
       Icon: IconSettings,
       onClick: () => console.log("Settings clicked"),
     },
   ];

  return <NavigationBar activeItemName="Home" items={navigationItems}/>;
};

Noticed something to change?

As an open-source company, we welcome contributions through Github. Help us keep it up-to-date, accurate, and easy to understand by getting involved and sharing your ideas!

twenty github image
The #1 Open Source CRM
©2024 Twenty PBC