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 logotype, organization, space, and environment information. Use it as a child of the Navbar switcher prop.
<Navbar.SwitcherItem>: Represents an item within the <Navbar.Switcher>. Use it to render organization, space, and environment information in different states. Use it as a child of the <Navbar.Switcher>.
<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={<AssetIcon />} />
      <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={<AssetIcon />} />
      <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={<AssetIcon />} />
      <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={<AssetIcon />} />
      <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={<AssetIcon />} />
      <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={<AssetIcon />} />
      <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={<AssetIcon />} />
      <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={<AssetIcon />} />
      <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
badge	string number false true {} ReactElement<any, string \| JSXElementConstructor<any>> ReactNodeArray ReactPortal
bottomRightItems	string number false true {} ReactElement<any, string \| JSXElementConstructor<any>> ReactNodeArray ReactPortal Items that will be rendered on the bottom-right of the navbar. Useful for separating other navigation items from main ones, (e.g. separating "Settings" from all other navigation items).
children	ReactNode
className	string CSS class to be appended to the root element
contentMaxWidth	string Defines the max-width of the content inside the navbar.	'100%'
help	string number false true {} ReactElement<any, string \| JSXElementConstructor<any>> ReactNodeArray ReactPortal
search	string number false true {} ReactElement<any, string \| JSXElementConstructor<any>> ReactNodeArray ReactPortal
switcher	string number false true {} ReactElement<any, string \| JSXElementConstructor<any>> ReactNodeArray ReactPortal
testId	string A [data-test-id] attribute used for testing purposes
topRightItems	string number false true {} ReactElement<any, string \| JSXElementConstructor<any>> ReactNodeArray ReactPortal Items that will be rendered on the top-right of the navbar. Useful for providing additional context or actions to the user (e.g. a Feedback form link).

Navbar.Item

Name	Type	Default
title required	string
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
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

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

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

Name	Type	Default
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>
logo	string number false true {} ReactElement<any, string \| JSXElementConstructor<any>> ReactNodeArray ReactPortal Will be displayed instead of the default Contentful logo
testId	string A [data-test-id] attribute used for testing purposes

Navbar.SwitcherItem

Name	Type	Default
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>
envVariant	"master" "non-master"
isAlias	false true
isCircle	false true
testId	string A [data-test-id] attribute used for testing purposes

Navbar.Search

Name	Type	Default
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>
testId	string A [data-test-id] attribute used for testing purposes

Navbar.Help

Name	Type	Default
children required	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>
testId	string A [data-test-id] attribute used for testing purposes

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

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

Name

Type

Default

Navbar.Switcher

Name

Type

Default

Navbar.SwitcherItem

Name

Type

Default

Navbar.Search

Name

Type

Default

Navbar.Help

Name

Type

Default

Navbar.Account

Name

Type

Default

Navbar.Badge

Name

Type

Default

Help improve this page