# NavigationBar

A universal header component for navigation and wayfinding.

## Import

```tsx
import { NavigationBar } from '@coinbase/cds-web/navigation/NavigationBar'
```

## Examples

### Web: Logged in Navigation Bar

```jsx live
function NavigationWithPress() {
  const tabs = [
    {
      id: 'all',
      label: 'All',
    },
    {
      id: 'watchlist',
      label: 'Watchlist',
    },
    {
      id: 'tradable',
      label: 'Tradable',
    },
    {
      id: 'gainers',
      label: 'Gainers',
      count: 2,
    },
    {
      id: 'losers',
      label: 'Losers',
    },
    {
      id: 'trending',
      label: 'Trending',
    },
    {
      id: 'other',
      label: 'Other',
    },
  ];
  const [search, setSearch] = useState('');
  const [value, setValue] = useState(tabs[1].id);
  const showBackButton = useMemo(() => value !== tabs[0].id, [value]);
  const handleBackPress = useCallback(() => {
    setValue(tabs[0].id);
  }, []);
  return (
    <NavigationBar
      start={
        showBackButton && (
          <IconButton name="backArrow" onClick={handleBackPress} accessibilityLabel="Back" />
        )
      }
      end={
        <HStack gap={1} alignItems="center">
          <IconButton accessibilityLabel="Language" active={false} name="globe" />
          <IconButton accessibilityLabel="Notifications" active name="bell" />
        </HStack>
      }
      bottom={<TabNavigation tabs={tabs} value={value} onChange={setValue} />}
    >
      <HStack alignItems="center" flexGrow={1} gap={1}>
        <VStack width="100%">
          <SearchInput
            compact
            accessibilityLabel="Search"
            onChangeText={setSearch}
            placeholder="Search"
            value={search}
          />
        </VStack>
      </HStack>
    </NavigationBar>
  );
}
```

## Props

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `children` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | Yes | `-` | The middle content. Use the children to render the page title |
| `accessibilityLabel` | `string` | No | `-` | Accessibility label for the nav bar |
| `bottom` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | The  bottom content. Use to render tabs |
| `columnGap` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `2` | Space between the start, children, and end of the nav bar |
| `dangerouslyDisableOverflowHidden` | `boolean` | No | `-` | Disable the overflow: hidden style from being injected to the child Col |
| `end` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Node (icons, avatar, etc) to display at the end of the nav bar |
| `paddingBottom` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `2` | - |
| `paddingTop` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `2` | - |
| `paddingX` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `2` | - |
| `rowGap` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `2` | Space between bottom of the nav bar and the rest of its content |
| `start` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Node (ie Back button) to display at the start of the nav bar |
| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |