> ## 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.

# NavigationBar

> An icon navigation bar with application-owned active state.

`NavigationBar` receives items with unique names, accessible labels, icon components, and callbacks. `activeItemName` controls which item is highlighted. The bar does not perform routing.

```tsx theme={null}
import { useState } from 'react';
import { NavigationBar } from 'twenty-ui/components';
import { IconHome, IconSettings } from 'twenty-ui/icon';

export const WorkspaceNavigation = () => {
  const [active, setActive] = useState('home');

  return (
    <NavigationBar
      activeItemName={active}
      items={[
        {
          name: 'home',
          label: 'Home',
          Icon: IconHome,
          onClick: () => setActive('home'),
        },
        {
          name: 'settings',
          label: 'Settings',
          Icon: IconSettings,
          onClick: () => setActive('settings'),
        },
      ]}
    />
  );
};
```

Connect each callback to your router when the items change routes. `isHidden` hides the bar. For ordinary navigation links with tab styling, use [TabButton](/ui/components/tab-button).

## Props

<ParamField body="activeItemName" type="string" required>
  Name of the item to highlight. The application owns navigation.
</ParamField>

<ParamField body="isHidden" type="boolean" default="false">
  Hides the bar visually and from the accessibility tree.
</ParamField>

<ParamField body="items" type="{ name: string; label: string; Icon: IconComponent; onClick: () => void; }[]" required>
  Navigation items with a unique name, accessible label, Icon component, and onClick callback.
</ParamField>