NavigationBar

@coinbase/cds-web@8.75.2

A universal header component for navigation and wayfinding.

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

󰒨

Source

󰏖

Storybook

󰏖

Figma

󰕨

󰏖

View as Markdown

---

Related components

• NavigationTitle,
• TabNavigation,
• Sidebar

NavigationBar is a horizontal navigation component that provides a consistent header for application navigation and wayfinding. It supports flexible content areas, theming, and custom styling.

Basics

Loading...

󰙡

Live Code

<NavigationBar
  start={<IconButton name="backArrow" accessibilityLabel="Back" />}
  end={
    <HStack gap={1} alignItems="center">
      <IconButton name="bell" accessibilityLabel="Notifications" />
      <Avatar size="xl" />
    </HStack>
  }
>
  <NavigationTitle>Dashboard</NavigationTitle>
</NavigationBar>

With Tab Navigation

Use the bottom prop to add tab navigation below the main content.

Loading...

󰙡

Live Code

function NavigationWithTabs() {
  const tabs = [
    { id: 'all', label: 'All' },
    { id: 'watchlist', label: 'Watchlist' },
    { id: 'tradable', label: 'Tradable' },
    { id: 'gainers', label: 'Gainers' },
  ];
  const [value, setValue] = useState(tabs[0].id);

  return (
    <NavigationBar
      end={
        <HStack gap={1} alignItems="center">
          <IconButton name="bell" accessibilityLabel="Notifications" />
          <Avatar size="xl" />
        </HStack>
      }
      bottom={<TabNavigation tabs={tabs} value={value} onChange={setValue} />}
    >
      <NavigationTitle>Portfolio</NavigationTitle>
    </NavigationBar>
  );
}

With Search

Loading...

󰙡

Live Code

function NavigationWithSearch() {
  const [search, setSearch] = useState('');

  return (
    <NavigationBar
      start={<IconButton name="backArrow" accessibilityLabel="Back" />}
      end={<IconButton name="settings" accessibilityLabel="Settings" />}
    >
      <SearchInput
        compact
        accessibilityLabel="Search"
        onChangeText={setSearch}
        placeholder="Search assets..."
        value={search}
      />
    </NavigationBar>
  );
}

Accessibility

Use accessibilityLabel to provide context for screen readers. The default label is "main navigation".

Loading...

󰙡

Live Code

<NavigationBar
  accessibilityLabel="Primary site navigation"
  start={<IconButton name="backArrow" accessibilityLabel="Go back to previous page" />}
  end={<IconButton name="bell" accessibilityLabel="View notifications, 3 unread" />}
>
  <NavigationTitle>Account Settings</NavigationTitle>
</NavigationBar>

When using interactive elements in the navigation bar, ensure each has appropriate accessibility labels describing their action.

Composed Examples

Full Navigation with Back Button

A complete navigation example with dynamic back button visibility and tab navigation.

Loading...

󰙡

Live Code

function FullNavigation() {
  const tabs = [
    { id: 'all', label: 'All' },
    { id: 'watchlist', label: 'Watchlist' },
    { id: 'tradable', label: 'Tradable' },
    { id: 'gainers', label: 'Gainers' },
    { id: 'losers', label: 'Losers' },
  ];
  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" name="globe" />
          <IconButton accessibilityLabel="Notifications" active name="bell" />
        </HStack>
      }
      bottom={<TabNavigation tabs={tabs} value={value} onChange={setValue} />}
    >
      <SearchInput
        compact
        accessibilityLabel="Search"
        onChangeText={setSearch}
        placeholder="Search"
        value={search}
      />
    </NavigationBar>
  );
}

Responsive Navigation

A responsive navigation bar that adapts to screen size. On mobile, the search input collapses to an icon button.

Loading...

󰙡

Live Code

function ResponsiveNavigation() {
  const [search, setSearch] = useState('');
  const [searchOpen, setSearchOpen] = useState(false);
  const { isMobile } = useBreakpoints();

  const handleSearchToggle = useCallback(() => {
    setSearchOpen((prev) => !prev);
    if (searchOpen) {
      setSearch('');
    }
  }, [searchOpen]);

  return (
    <NavigationBar
      background="bgSecondary"
      start={<IconButton name="backArrow" accessibilityLabel="Back" />}
      end={
        <HStack gap={1} alignItems="center">
          {isMobile && (
            <IconButton
              name="search"
              accessibilityLabel="Search"
              onClick={handleSearchToggle}
              active={searchOpen}
            />
          )}
          <IconButton name="bell" accessibilityLabel="Notifications" />
          <Avatar size="xl" />
        </HStack>
      }
    >
      {isMobile ? (
        searchOpen && (
          <SearchInput
            compact
            accessibilityLabel="Search"
            onChangeText={setSearch}
            placeholder="Search..."
            value={search}
          />
        )
      ) : (
        <SearchInput
          compact
          accessibilityLabel="Search"
          onChangeText={setSearch}
          placeholder="Search assets..."
          value={search}
        />
      )}
      {!isMobile && !searchOpen && <NavigationTitle>Trading</NavigationTitle>}
    </NavigationBar>
  );
}