Forma 36 - Navbar

Import

import { Navbar } from '@contentful/f36-components';
// or
import { Navbar } from '@contentful/f36-navbar';

Examples

You can use following components to build a menu:

<Navbar>: The main wrapper component.
<Navbar.Item>: Represents a main navigation item. Use it as a child of the <Navbar> component or the bottomRightItems prop of Navbar.
<Navbar.MenuItem>: Represents a menu item used to create dropdown menus. Use it as a child of the <Navbar.Item>, <Navbar.Account>, or <Navbar.Help> components.
<Navbar.MenuDivider>: A visual separator for menu items. Use it before or after a <Navbar.MenuItem>.
<Navbar.MenuSectionTitle>: A title that can be used in the menu list. Use it before or after a <Navbar.MenuItem>.
<Navbar.Switcher>: Wrapper component for the space and environment information. Use it as a child of the Navbar switcher prop.
<Navbar.Search>: Trigger for the global search. Use it as a child of the Navbar search prop.
<Navbar.Help>: Trigger for the help menu. Use it as a child of the Navbar help prop.
<Navbar.Account>: Trigger for the account menu. Use it as a child of the Navbar account prop.
<Navbar.Badge>: Represents an item that provides additional information, such as indicating that the user's space is on a trial. Use it as a child of the Navbar badge prop.
<Navbar.TopbarItem>: Represents an item that provides additional links or CTAs (Call to Actions), such as a link to the feedback form. Use it as a child of the Navbar topRightItems prop.
<Navbar.ItemSkeleton>: Loading skeleton for <Navbar.Item>. Use it as a child of the <Navbar> component or the bottomRightItems prop of Navbar.
<Navbar.MenuItemSkeleton>: Loading skeleton for <Navbar.MenuItem>. Use it as a child of the <Navbar.Item>, <Navbar.Account>, or <Navbar.Help> components.
<Navbar.SwitcherSkeleton>: Loading skeleton for <Navbar.Switcher>. Use it as a child of the Navbar switcher prop.
<Navbar.AccountSkeleton>: Loading skeleton for <Navbar.Account>. Use it as a child of the Navbar account prop.

Basic usage


function BasicNavbarExample() {
  return (
    <Navbar
      switcher={
        <Navbar.Switcher logo="">
          <Navbar.SwitcherItem isCircle>
            <span role="img" aria-label="org logo">
              ⚡️
            </span>
          </Navbar.SwitcherItem>
          <Navbar.SwitcherItem>Space</Navbar.SwitcherItem>
          <Navbar.SwitcherItem envVariant="master">master</Navbar.SwitcherItem>
        </Navbar.Switcher>
      }
      account={
        <Navbar.Account
          username="username"
          avatar="https://images.ctfassets.net/iq4lnigp6fgt/2EEEk92Kiz6KxREsjBLPAN/810d5a21650d91abad12e95da4cd3beb/2021-06_Everyone_is_Welcome_here_1_.png?fit=fill&f=top_left&w=48&h=48"
        >
          <Navbar.MenuItem title="Account settings" />
          <Navbar.MenuItem title="Dashboard" />
          <Navbar.MenuDivider />
          <Navbar.MenuItem title="Log out" />
        </Navbar.Account>
      }
    >
      <Navbar.Item title="Home" isActive />
      <Navbar.Item title="Content model" />
      <Navbar.Item title="Content" icon={<EntryIcon />} />
      <Navbar.Item title="Media" icon={<ImageSquareIcon />} />
      <Navbar.Item title="Apps">
        <Navbar.MenuItem
          title="App 1"
          icon={
            <img
              src="https://images.ctfassets.net/iq4lnigp6fgt/2EEEk92Kiz6KxREsjBLPAN/810d5a21650d91abad12e95da4cd3beb/2021-06_Everyone_is_Welcome_here_1_.png?fit=fill&f=top_left&w=32&h=32"
              alt="app 1"
            />
          }
        />
        <Navbar.MenuItem title="App 2" />
      </Navbar.Item>
    </Navbar>
  );
}function BasicNavbarExample() {
  return (
    <Navbar
      switcher={
        <Navbar.Switcher logo="">
          <Navbar.SwitcherItem isCircle>
            <span role="img" aria-label="org logo">
              ⚡️
            </span>
          </Navbar.SwitcherItem>
          <Navbar.SwitcherItem>Space</Navbar.SwitcherItem>
          <Navbar.SwitcherItem envVariant="master">master</Navbar.SwitcherItem>
        </Navbar.Switcher>
      }
      account={
        <Navbar.Account
          username="username"
          avatar="https://images.ctfassets.net/iq4lnigp6fgt/2EEEk92Kiz6KxREsjBLPAN/810d5a21650d91abad12e95da4cd3beb/2021-06_Everyone_is_Welcome_here_1_.png?fit=fill&f=top_left&w=48&h=48"
        >
          <Navbar.MenuItem title="Account settings" />
          <Navbar.MenuItem title="Dashboard" />
          <Navbar.MenuDivider />
          <Navbar.MenuItem title="Log out" />
        </Navbar.Account>
      }
    >
      <Navbar.Item title="Home" isActive />
      <Navbar.Item title="Content model" />
      <Navbar.Item title="Content" icon={<EntryIcon />} />
      <Navbar.Item title="Media" icon={<ImageSquareIcon />} />
      <Navbar.Item title="Apps">
        <Navbar.MenuItem
          title="App 1"
          icon={
            <img
              src="https://images.ctfassets.net/iq4lnigp6fgt/2EEEk92Kiz6KxREsjBLPAN/810d5a21650d91abad12e95da4cd3beb/2021-06_Everyone_is_Welcome_here_1_.png?fit=fill&f=top_left&w=32&h=32"
              alt="app 1"
            />
          }
        />
        <Navbar.MenuItem title="App 2" />
      </Navbar.Item>
    </Navbar>
  );
}
Open in Playground


function CompleteNavbarExample() {
  return (
    <Navbar
      switcher={
        <Navbar.Switcher logo="">
          <Navbar.SwitcherItem isCircle>
            <span role="img" aria-label="org logo">
              ⚡️
            </span>
          </Navbar.SwitcherItem>
          <Navbar.SwitcherItem>Space</Navbar.SwitcherItem>
          <Navbar.SwitcherItem envVariant="master">master</Navbar.SwitcherItem>
        </Navbar.Switcher>
      }
      account={
        <Navbar.Account
          username="username"
          avatar="https://images.ctfassets.net/iq4lnigp6fgt/2EEEk92Kiz6KxREsjBLPAN/810d5a21650d91abad12e95da4cd3beb/2021-06_Everyone_is_Welcome_here_1_.png?fit=fill&f=top_left&w=48&h=48"
        >
          <Navbar.MenuItem title="Account settings" />
          <Navbar.MenuItem title="Dashboard" />
          <Navbar.MenuDivider />
          <Navbar.MenuItem title="Log out" />
        </Navbar.Account>
      }
      help={
        <Navbar.Help>
          <Navbar.MenuItem
            as="a"
            target="_blank"
            rel="noopener noreferrer"
            title="Help center"
            testId="cf-ui-navbar-help-menu-help-center"
            href={'https://www.contentful.com/help/'}
          />
          <Navbar.MenuItem
            as="a"
            target="_blank"
            rel="noopener noreferrer"
            title="Developer docs"
            testId="cf-ui-navbar-help-menu-docs"
            href="https://www.contentful.com/developers/docs/"
          />
          <Navbar.MenuItem
            as="a"
            target="_blank"
            rel="noopener noreferrer"
            title="Training courses"
            testId="cf-ui-navbar-help-traning-center"
            href="https://training.contentful.com"
          />
          <Navbar.MenuDivider />
          <Navbar.MenuItem
            as="a"
            target="_blank"
            rel="noopener noreferrer"
            title="Get support"
            testId="cf-ui-navbar-help-support"
            href="https://support.contentful.com"
          />
        </Navbar.Help>
      }
      search={<Navbar.Search />}
      badge={<Navbar.Badge>Trial</Navbar.Badge>}
      topRightItems={<Navbar.TopbarItem>Feedback</Navbar.TopbarItem>}
      bottomRightItems={
        <Navbar.Item title="Settings">
          <Navbar.MenuSectionTitle>General</Navbar.MenuSectionTitle>
          <Navbar.MenuItem title="Home" />
          <Navbar.MenuItem title="API keys" />
          <Navbar.MenuSectionTitle>Space</Navbar.MenuSectionTitle>
          <Navbar.MenuItem title="Apps" />
          <Navbar.MenuItem title="Permissions" />
        </Navbar.Item>
      }
    >
      <Navbar.Item title="Home" isActive />
      <Navbar.Item title="Content model" />
      <Navbar.Item title="Content" icon={<EntryIcon />} />
      <Navbar.Item title="Media" icon={<ImageSquareIcon />} />
      <Navbar.Item title="Apps">
        <Navbar.MenuItem
          title="App 1"
          icon={
            <img
              src="https://images.ctfassets.net/iq4lnigp6fgt/2EEEk92Kiz6KxREsjBLPAN/810d5a21650d91abad12e95da4cd3beb/2021-06_Everyone_is_Welcome_here_1_.png?fit=fill&f=top_left&w=32&h=32"
              alt="app 1"
            />
          }
        />
        <Navbar.MenuItem title="App 2" />
      </Navbar.Item>
    </Navbar>
  );
}function CompleteNavbarExample() {
  return (
    <Navbar
      switcher={
        <Navbar.Switcher logo="">
          <Navbar.SwitcherItem isCircle>
            <span role="img" aria-label="org logo">
              ⚡️
            </span>
          </Navbar.SwitcherItem>
          <Navbar.SwitcherItem>Space</Navbar.SwitcherItem>
          <Navbar.SwitcherItem envVariant="master">master</Navbar.SwitcherItem>
        </Navbar.Switcher>
      }
      account={
        <Navbar.Account
          username="username"
          avatar="https://images.ctfassets.net/iq4lnigp6fgt/2EEEk92Kiz6KxREsjBLPAN/810d5a21650d91abad12e95da4cd3beb/2021-06_Everyone_is_Welcome_here_1_.png?fit=fill&f=top_left&w=48&h=48"
        >
          <Navbar.MenuItem title="Account settings" />
          <Navbar.MenuItem title="Dashboard" />
          <Navbar.MenuDivider />
          <Navbar.MenuItem title="Log out" />
        </Navbar.Account>
      }
      help={
        <Navbar.Help>
          <Navbar.MenuItem
            as="a"
            target="_blank"
            rel="noopener noreferrer"
            title="Help center"
            testId="cf-ui-navbar-help-menu-help-center"
            href={'https://www.contentful.com/help/'}
          />
          <Navbar.MenuItem
            as="a"
            target="_blank"
            rel="noopener noreferrer"
            title="Developer docs"
            testId="cf-ui-navbar-help-menu-docs"
            href="https://www.contentful.com/developers/docs/"
          />
          <Navbar.MenuItem
            as="a"
            target="_blank"
            rel="noopener noreferrer"
            title="Training courses"
            testId="cf-ui-navbar-help-traning-center"
            href="https://training.contentful.com"
          />
          <Navbar.MenuDivider />
          <Navbar.MenuItem
            as="a"
            target="_blank"
            rel="noopener noreferrer"
            title="Get support"
            testId="cf-ui-navbar-help-support"
            href="https://support.contentful.com"
          />
        </Navbar.Help>
      }
      search={<Navbar.Search />}
      badge={<Navbar.Badge>Trial</Navbar.Badge>}
      topRightItems={<Navbar.TopbarItem>Feedback</Navbar.TopbarItem>}
      bottomRightItems={
        <Navbar.Item title="Settings">
          <Navbar.MenuSectionTitle>General</Navbar.MenuSectionTitle>
          <Navbar.MenuItem title="Home" />
          <Navbar.MenuItem title="API keys" />
          <Navbar.MenuSectionTitle>Space</Navbar.MenuSectionTitle>
          <Navbar.MenuItem title="Apps" />
          <Navbar.MenuItem title="Permissions" />
        </Navbar.Item>
      }
    >
      <Navbar.Item title="Home" isActive />
      <Navbar.Item title="Content model" />
      <Navbar.Item title="Content" icon={<EntryIcon />} />
      <Navbar.Item title="Media" icon={<ImageSquareIcon />} />
      <Navbar.Item title="Apps">
        <Navbar.MenuItem
          title="App 1"
          icon={
            <img
              src="https://images.ctfassets.net/iq4lnigp6fgt/2EEEk92Kiz6KxREsjBLPAN/810d5a21650d91abad12e95da4cd3beb/2021-06_Everyone_is_Welcome_here_1_.png?fit=fill&f=top_left&w=32&h=32"
              alt="app 1"
            />
          }
        />
        <Navbar.MenuItem title="App 2" />
      </Navbar.Item>
    </Navbar>
  );
}
Open in Playground


function WithDifferentEnviromnmentsNavbarExample() {
  // master environment
  const envVariant = 'master';
  const envName = 'master';

  // Try non-master environment
  // const envVariant = 'non-master';
  // const envName = 'development'

  const isAlias = false;
  // Try both master and non-master environment with alias
  // const isAlias = true;

  return (
    <Navbar
      switcher={
        <Navbar.Switcher logo="">
          <Navbar.SwitcherItem isCircle>
            <span role="img" aria-label="org logo">
              ⚡️
            </span>
          </Navbar.SwitcherItem>
          <Navbar.SwitcherItem>Space</Navbar.SwitcherItem>
          <Navbar.SwitcherItem envVariant={envVariant} isAlias={isAlias}>
            {envName}
          </Navbar.SwitcherItem>
        </Navbar.Switcher>
      }
      account={
        <Navbar.Account
          username="username"
          avatar="https://images.ctfassets.net/iq4lnigp6fgt/2EEEk92Kiz6KxREsjBLPAN/810d5a21650d91abad12e95da4cd3beb/2021-06_Everyone_is_Welcome_here_1_.png?fit=fill&f=top_left&w=48&h=48"
        >
          <Navbar.MenuItem title="Account settings" />
          <Navbar.MenuItem title="Dashboard" />
          <Navbar.MenuDivider />
          <Navbar.MenuItem title="Log out" />
        </Navbar.Account>
      }
    >
      <Navbar.Item title="Home" isActive />
      <Navbar.Item title="Content model" />
      <Navbar.Item title="Content" icon={<EntryIcon />} />
      <Navbar.Item title="Media" icon={<ImageSquareIcon />} />
      <Navbar.Item title="Apps">
        <Navbar.MenuItem
          title="App 1"
          icon={
            <img
              src="https://images.ctfassets.net/iq4lnigp6fgt/2EEEk92Kiz6KxREsjBLPAN/810d5a21650d91abad12e95da4cd3beb/2021-06_Everyone_is_Welcome_here_1_.png?fit=fill&f=top_left&w=32&h=32"
              alt="app 1"
            />
          }
        />
        <Navbar.MenuItem title="App 2" />
      </Navbar.Item>
    </Navbar>
  );
}function WithDifferentEnviromnmentsNavbarExample() {
  // master environment
  const envVariant = 'master';
  const envName = 'master';

  // Try non-master environment
  // const envVariant = 'non-master';
  // const envName = 'development'

  const isAlias = false;
  // Try both master and non-master environment with alias
  // const isAlias = true;

  return (
    <Navbar
      switcher={
        <Navbar.Switcher logo="">
          <Navbar.SwitcherItem isCircle>
            <span role="img" aria-label="org logo">
              ⚡️
            </span>
          </Navbar.SwitcherItem>
          <Navbar.SwitcherItem>Space</Navbar.SwitcherItem>
          <Navbar.SwitcherItem envVariant={envVariant} isAlias={isAlias}>
            {envName}
          </Navbar.SwitcherItem>
        </Navbar.Switcher>
      }
      account={
        <Navbar.Account
          username="username"
          avatar="https://images.ctfassets.net/iq4lnigp6fgt/2EEEk92Kiz6KxREsjBLPAN/810d5a21650d91abad12e95da4cd3beb/2021-06_Everyone_is_Welcome_here_1_.png?fit=fill&f=top_left&w=48&h=48"
        >
          <Navbar.MenuItem title="Account settings" />
          <Navbar.MenuItem title="Dashboard" />
          <Navbar.MenuDivider />
          <Navbar.MenuItem title="Log out" />
        </Navbar.Account>
      }
    >
      <Navbar.Item title="Home" isActive />
      <Navbar.Item title="Content model" />
      <Navbar.Item title="Content" icon={<EntryIcon />} />
      <Navbar.Item title="Media" icon={<ImageSquareIcon />} />
      <Navbar.Item title="Apps">
        <Navbar.MenuItem
          title="App 1"
          icon={
            <img
              src="https://images.ctfassets.net/iq4lnigp6fgt/2EEEk92Kiz6KxREsjBLPAN/810d5a21650d91abad12e95da4cd3beb/2021-06_Everyone_is_Welcome_here_1_.png?fit=fill&f=top_left&w=32&h=32"
              alt="app 1"
            />
          }
        />
        <Navbar.MenuItem title="App 2" />
      </Navbar.Item>
    </Navbar>
  );
}
Open in Playground


function WithAccountNotificationNavbarExample() {
  const notificationVariant = 'warning';

  // Try 'negative' or 'info' notifification variant
  // const notificationVariant = 'negative'

  return (
    <Navbar
      switcher={
        <Navbar.Switcher logo="">
          <Navbar.SwitcherItem isCircle>
            <span role="img" aria-label="org logo">
              ⚡️
            </span>
          </Navbar.SwitcherItem>
          <Navbar.SwitcherItem>Space</Navbar.SwitcherItem>
          <Navbar.SwitcherItem envVariant="master">master</Navbar.SwitcherItem>
        </Navbar.Switcher>
      }
      account={
        <Navbar.Account
          username="username"
          avatar="https://images.ctfassets.net/iq4lnigp6fgt/2EEEk92Kiz6KxREsjBLPAN/810d5a21650d91abad12e95da4cd3beb/2021-06_Everyone_is_Welcome_here_1_.png?fit=fill&f=top_left&w=48&h=48"
          hasNotification
          notificationVariant={notificationVariant}
        >
          <Navbar.MenuItem title="Account settings" />
          <Navbar.MenuItem title="Dashboard" />
          <Navbar.MenuDivider />
          <Navbar.MenuItem title="Log out" />
        </Navbar.Account>
      }
    >
      <Navbar.Item title="Home" isActive />
      <Navbar.Item title="Content model" />
      <Navbar.Item title="Content" icon={<EntryIcon />} />
      <Navbar.Item title="Media" icon={<ImageSquareIcon />} />
      <Navbar.Item title="Apps">
        <Navbar.MenuItem
          title="App 1"
          icon={
            <img
              src="https://images.ctfassets.net/iq4lnigp6fgt/2EEEk92Kiz6KxREsjBLPAN/810d5a21650d91abad12e95da4cd3beb/2021-06_Everyone_is_Welcome_here_1_.png?fit=fill&f=top_left&w=32&h=32"
              alt="app 1"
            />
          }
        />
        <Navbar.MenuItem title="App 2" />
      </Navbar.Item>
    </Navbar>
  );
}function WithAccountNotificationNavbarExample() {
  const notificationVariant = 'warning';

  // Try 'negative' or 'info' notifification variant
  // const notificationVariant = 'negative'

  return (
    <Navbar
      switcher={
        <Navbar.Switcher logo="">
          <Navbar.SwitcherItem isCircle>
            <span role="img" aria-label="org logo">
              ⚡️
            </span>
          </Navbar.SwitcherItem>
          <Navbar.SwitcherItem>Space</Navbar.SwitcherItem>
          <Navbar.SwitcherItem envVariant="master">master</Navbar.SwitcherItem>
        </Navbar.Switcher>
      }
      account={
        <Navbar.Account
          username="username"
          avatar="https://images.ctfassets.net/iq4lnigp6fgt/2EEEk92Kiz6KxREsjBLPAN/810d5a21650d91abad12e95da4cd3beb/2021-06_Everyone_is_Welcome_here_1_.png?fit=fill&f=top_left&w=48&h=48"
          hasNotification
          notificationVariant={notificationVariant}
        >
          <Navbar.MenuItem title="Account settings" />
          <Navbar.MenuItem title="Dashboard" />
          <Navbar.MenuDivider />
          <Navbar.MenuItem title="Log out" />
        </Navbar.Account>
      }
    >
      <Navbar.Item title="Home" isActive />
      <Navbar.Item title="Content model" />
      <Navbar.Item title="Content" icon={<EntryIcon />} />
      <Navbar.Item title="Media" icon={<ImageSquareIcon />} />
      <Navbar.Item title="Apps">
        <Navbar.MenuItem
          title="App 1"
          icon={
            <img
              src="https://images.ctfassets.net/iq4lnigp6fgt/2EEEk92Kiz6KxREsjBLPAN/810d5a21650d91abad12e95da4cd3beb/2021-06_Everyone_is_Welcome_here_1_.png?fit=fill&f=top_left&w=32&h=32"
              alt="app 1"
            />
          }
        />
        <Navbar.MenuItem title="App 2" />
      </Navbar.Item>
    </Navbar>
  );
}
Open in Playground


function LoadingSkeletonNavbarExample() {
  return (
    <Navbar
      account={<Navbar.AccountSkeleton ariaLabel="Loading account" />}
      switcher={
        <Navbar.Switcher>
          <Navbar.SwitcherSkeleton estimatedWidth={148} />
        </Navbar.Switcher>
      }
      bottomRightItems={<Navbar.ItemSkeleton estimatedWidth={120} />}
    >
      <Navbar.ItemSkeleton estimatedWidth={100} />
      <Navbar.ItemSkeleton estimatedWidth={100} />
      <Navbar.ItemSkeleton estimatedWidth={100} />
      <Navbar.ItemSkeleton estimatedWidth={100} />
    </Navbar>
  );
}function LoadingSkeletonNavbarExample() {
  return (
    <Navbar
      account={<Navbar.AccountSkeleton ariaLabel="Loading account" />}
      switcher={
        <Navbar.Switcher>
          <Navbar.SwitcherSkeleton estimatedWidth={148} />
        </Navbar.Switcher>
      }
      bottomRightItems={<Navbar.ItemSkeleton estimatedWidth={120} />}
    >
      <Navbar.ItemSkeleton estimatedWidth={100} />
      <Navbar.ItemSkeleton estimatedWidth={100} />
      <Navbar.ItemSkeleton estimatedWidth={100} />
      <Navbar.ItemSkeleton estimatedWidth={100} />
    </Navbar>
  );
}
Open in Playground

Props (API reference)

Open in Storybook

Name	Type	Default
account	string number false true {} ReactElement<any, string \| JSXElementConstructor<any>> ReactNodeArray ReactPortal User Account Component
className	string CSS class to be appended to the root element
contentMaxWidth	string Defines the max-width of the content inside the navbar.	'100%'
logo	string number false true {} ReactElement<any, string \| JSXElementConstructor<any>> ReactNodeArray ReactPortal Accepts a React Component that will be displayed instead of the Contentful Logo
mainNavigation	string number false true {} ReactElement<any, string \| JSXElementConstructor<any>> ReactNodeArray ReactPortal Main Navigation Elements
mobileNavigation	string number false true {} ReactElement<any, string \| JSXElementConstructor<any>> ReactNodeArray ReactPortal Navigation displayed on mobile versions
mobileNavigationBp	"small" "medium" breakpoint to determine when to show the mobile navigation
promotions	string number false true {} ReactElement<any, string \| JSXElementConstructor<any>> ReactNodeArray ReactPortal Promotions component, displayed on most left side
secondaryNavigation	string number false true {} ReactElement<any, string \| JSXElementConstructor<any>> ReactNodeArray ReactPortal Secondary Navigation Elements, displayed in the right side
switcher	string number false true {} ReactElement<any, string \| JSXElementConstructor<any>> ReactNodeArray ReactPortal Environment Switcher component
testId	string A [data-test-id] attribute used for testing purposes
variant	"wide" "fullscreen" Describes the size variation of the Navbar Variant wide will set the contentMaxWidth to 1524px

Navbar.Item

Name	Type	Default
as	HTML Tag or React Component (e.g. div, span, etc)
children	ReactNode
className	string CSS class to be appended to the root element
icon	ReactElement<GeneratedIconProps, string \| JSXElementConstructor<any>>
isActive	false true
label	string
onClose	() => void Callback fired when the Menu closes
onOpen	() => void Callback fired when the Menu opens
testId	string A [data-test-id] attribute used for testing purposes
title	string

Navbar.MenuItem

Name	Type	Default
as	HTML Tag or React Component (e.g. div, span, etc)
children
className	string CSS class to be appended to the root element
css	string number false true ComponentSelector Keyframes SerializedStyles ArrayInterpolation<undefined> ObjectInterpolation<undefined> (theme: any) => Interpolation<undefined>
icon	ReactElement<GeneratedIconProps, string \| JSXElementConstructor<any>> & ReactElement<any, string \| JSXElementConstructor<any>> Expects any of the icon components. Renders the icon aligned to the start
isActive	false true Marks item as active
isDisabled	false true Marks item as disabled
isInitiallyFocused	false true Sets focus on item
testId	string A [data-test-id] attribute used for testing purposes
title	string

Navbar.TopbarItem

Navbar.Switcher

Name	Type	Default
ariaLabel	string
children	ReactNode
className	string CSS class to be appended to the root element
css	string number false true ComponentSelector Keyframes SerializedStyles ArrayInterpolation<undefined> ObjectInterpolation<undefined> (theme: any) => Interpolation<undefined>
environment	string
envVariant	"master" "non-master"
isAlias	false true
isCircle	false true
isLoading	false true
space	string
testId	string A [data-test-id] attribute used for testing purposes

Navbar.Search

Navbar.Help

Navbar.Account

Name	Type	Default
children required	ReactNode
username required	string
avatar	string
className	string CSS class to be appended to the root element
css	string number false true ComponentSelector Keyframes SerializedStyles ArrayInterpolation<undefined> ObjectInterpolation<undefined> (theme: any) => Interpolation<undefined>
hasNotification	false true
initials	string
label	string
notificationVariant	"warning" "negative" "info"	'warning'
testId	string A [data-test-id] attribute used for testing purposes

Navbar.Badge

Name	Type	Default
as	HTML Tag or React Component (e.g. div, span, etc)
children	ReactNode
className	string CSS class to be appended to the root element
testId	string A [data-test-id] attribute used for testing purposes

Navbar

Import

Examples

Basic usage

Complete Navbar

Navbar with different enviromnments

Navbar with account notification

Navbar loading skeleton

Props (API reference)

Navbar

Name

Type

Default

Navbar.Item

Name

Type

Default

Navbar.MenuItem

Name

Type

Default

Navbar.TopbarItem

Navbar.Switcher

Name

Type

Default

Navbar.Search

Navbar.Help

Navbar.Account

Name

Type

Default

Navbar.Badge

Name

Type

Default

Help improve this page