> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 내비게이션 바

여러 `NavigationBarItem` 구성 요소를 포함하는 탐색 막대를 렌더링합니다.

<Tabs>
  <Tab title="사용법">
    ```jsx theme={null}
    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}/>;
    };
    ```
  </Tab>

  <Tab title="프로퍼티">
    | 프로퍼티           | 유형  | 설명                                                                                                |
    | -------------- | --- | ------------------------------------------------------------------------------------------------- |
    | activeItemName | 문자열 | 현재 활성화된 탐색 항목의 이름                                                                                 |
    | 항목             | 배열  | 각 탐색 항목을 나타내는 객체 배열입니다. 각 객체에는 항목의 `name`, 표시할 `Icon` 구성 요소 및 항목이 클릭될 때 호출되는 `onClick` 함수가 포함됩니다. |
  </Tab>
</Tabs>