Forma 36 - Navbar

Introduction

The Navbar component is composed of multiple predefined areas, each configurable through dedicated props. It does not accept children directly. All areas are designed with responsiveness in mind and will appear or disappear based on screen breakpoints.

The Navbar exports the following compound components

Compound Component	Description	Typical Usage Area
`<Navbar.Item>`	Represents a main navigation item. Use it as a child of the `<Navbar>` component or the `bottomRightItems` prop of Navbar.	`mainNavigation`, `secondaryNavigation`
`<Navbar.MenuItem>`	Represents an individual menu item, typically used to create dropdowns. Use it as a child of either `<Navbar.Item>` or `<Navbar.Account>`.	`mobileNavigation`, `account`
`<Navbar.Submenu>`	Wraps one or more `<Navbar.MenuItem>` components to create a nested menu within the `mobileNavigation` area.	`mobileNavigation`
`<Navbar.MenuDivider>`	A visual separator for menu items. Use it before or after a `<Navbar.MenuItem>`. Alias for `MenuDivider` from the `Menu` component.	`mobileNavigation`, `account`
`<Navbar.MenuSectionTitle>`	A title that can be used in the menu list. Use it before or after a `<Navbar.MenuItem>`. Alias for `MenuSectionTitle` from the `Menu` component.	`mobileNavigation`, `account`
`<Navbar.Switcher>`	Wrapper component for the space and environment information. Use it as a child of the Navbar `switcher` prop.	`switcher`
`<Navbar.Account>`	Trigger for the account menu. Use it as a child of the Navbar `account` prop.	`account`
`<Navbar.Badge>`	Represents an item that provides additional information, such as indicating that the user's space is on a trial. Use as a child of the Navbar `badge`.	`promotions`, `badge`
`<Navbar.ItemSkeleton>`	Loading skeleton for `<Navbar.Item>`. Use it as a child of the `<Navbar>` component or the `bottomRightItems` prop of Navbar.	`mainNavigation`, `secondaryNavigation`
`<Navbar.MenuItemSkeleton>`	Loading skeleton for `<Navbar.MenuItem>`. Use it as a child of `<Navbar.Item>`, `<Navbar.Account>`, or `<Navbar.Help>`.	`mobileNavigation`, `account`, `help`
`<Navbar.SwitcherSkeleton>`	Loading skeleton for `<Navbar.Switcher>`. Use it as a child of the Navbar `switcher` prop.	`switcher`
`<Navbar.AccountSkeleton>`	Loading skeleton for `<Navbar.Account>`. Use it as a child of the Navbar `account` prop.	`account`

Navbar.Account

This compound component is used to generate the account menu; the user's avatar represents the menu trigger. It should be handed over to the Navbar via the account property, which will be rendered as the last element.

Navbar.Badge

This compound component is used for highlights and promotions. It should be used as a element applied to the promotions or account prop on the Navbar component

Navbar.Item

This component generates the individual Navigation Items. It expects a callback function and can not be used as a normal link. It is versatile and can be used with a title, as a Icon-Only element or as a dropdown menu. It should be used within the area properties mainNavigation secondaryNavigation or account In the secondaryNavigation area, the Navbar.Itemshould only use an icon and not hand over a title property but label instead. To keep this icon-only Navbar.Item accessible, the label is required. This label will also be shown as a tooltip on hover of the element. Navbar.Item accepts Navbar.MenuItem as children. When handing over the children, this Navbar.Item becomes a dropdown menu, listing all children inside the menu pop-out. It is possible to have a dropdown menu with title and icon or with icon and label for an icon-only menu.

Navbar.MenuItem, Navbar.MenuDivider, Navbar.MenuSectionTitle

These compound components are used as children of a Navbar.Item or as children to the mobileNavigation

Navbar.Submenu

Navbar.Submenu should only be used in the mobileNavigation area. It can be used to generate a nested Menu, it expects Navbar.MenuItem as children.

Navbar.Switcher

The Navbar.Switcher component is used for displaying the current space and environment names. It can also be used as trigger element to open a space switcher menu. It should always be used inside the switcher area property to ensure proper positioning.

Import

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

Examples

Basic usage


function BasicNavbarExample() {
  return (
    <Navbar
      mainNavigation={
        <>
          <Navbar.Item title="Content" icon={<PenNibIcon />} />
          <Navbar.Item title="Media" icon={<ImageSquareIcon />} />
          <Navbar.Item title="Apps" icon={<PuzzlePieceIcon />}>
            <Navbar.MenuItem
              title="App 1"
              icon={
                <img
                  src="https://images.ctfassets.net/iq4lnigp6fgt/72KhxI84kw1SE9gP8gDp7R/c5fa24bdc295a318018aea0ca46e2de8/forma-36-storybook-asset.png?fit=fill&f=top_left&w=32&h=32"
                  alt="app 1"
                />
              }
            />
            <Navbar.MenuItem title="App 2" />
          </Navbar.Item>
        </>
      }
      mobileNavigation={
        <>
          <Navbar.MenuItem title="Content" icon={<PenNibIcon />} />
          <Navbar.MenuItem title="Media" icon={<ImageSquareIcon />} />
          <Navbar.Submenu title="Apps" icon={<PuzzlePieceIcon />}>
            <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.Submenu>
        </>
      }
      switcher={
        <Navbar.Switcher
          isAlias={true}
          envVariant="non-master"
          space="my-space"
          environment="development"
        />
      }
      account={
        <Navbar.Account
          username="Conny Contentful"
          avatar="https://images.ctfassets.net/iq4lnigp6fgt/72KhxI84kw1SE9gP8gDp7R/c5fa24bdc295a318018aea0ca46e2de8/forma-36-storybook-asset.png?fit=fill&f=top_left&w=48&h=48"
          initials="CC"
          label="Account settings"
        >
          <Navbar.MenuItem title="Account settings" />
          <Navbar.MenuItem title="Dashboard" />
          <Navbar.MenuDivider />
          <Navbar.MenuItem
            title="External link"
            as="a"
            href="https://www.contentful.com"
            target="_blank"
            rel="noopener noreferrer"
          />
          <Navbar.MenuDivider />
          <Navbar.MenuItem title="Log out" />
        </Navbar.Account>
      }
      aria={{
        labelMainNavigation: 'Main navigation',
        labelAccount: 'My account',
      }}
    />
  );
}
Open in Playground


function CompleteNavbarExample() {
  return (
    <Navbar
      mainNavigation={
        <>
          <Navbar.Item title="Content" icon={<PenNibIcon />} />
          <Navbar.Item title="Media" icon={<ImageSquareIcon />} />
          <Navbar.Item title="Apps" icon={<PuzzlePieceIcon />}>
            <Navbar.MenuItem
              title="App 1"
              icon={
                <img
                  src="https://images.ctfassets.net/iq4lnigp6fgt/72KhxI84kw1SE9gP8gDp7R/c5fa24bdc295a318018aea0ca46e2de8/forma-36-storybook-asset.png?fit=fill&f=top_left&w=32&h=32"
                  alt="app 1"
                />
              }
            />
            <Navbar.MenuItem title="App 2" />
          </Navbar.Item>
        </>
      }
      mobileNavigation={
        <>
          <Navbar.MenuItem title="Content" icon={<PenNibIcon />} />
          <Navbar.MenuItem title="Media" icon={<ImageSquareIcon />} />
          <Navbar.Submenu title="Apps" icon={<PuzzlePieceIcon />}>
            <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.Submenu>
        </>
      }
      switcher={
        <Navbar.Switcher
          isAlias={true}
          envVariant="non-master"
          space="my-space"
          environment="development"
        />
      }
      promotions={
        <>
          <Navbar.Badge>Trial</Navbar.Badge>
        </>
      }
      secondaryNavigation={
        <>
          <Navbar.Item label="Quick Search" icon={<MagnifyingGlassIcon />} />
          <Navbar.Item label="Help Menu" icon={<QuestionIcon />}>
            <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.Item>
          <Navbar.Item label="Menu Settings" icon={<GearSixIcon />}>
            <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>
        </>
      }
      account={
        <Navbar.Account
          username="Conny Contentful"
          avatar="https://images.ctfassets.net/iq4lnigp6fgt/72KhxI84kw1SE9gP8gDp7R/c5fa24bdc295a318018aea0ca46e2de8/forma-36-storybook-asset.png?fit=fill&f=top_left&w=48&h=48"
          initials="CC"
          label="Account settings"
        >
          <Navbar.MenuItem title="Account settings" />
          <Navbar.MenuItem title="Dashboard" />
          <Navbar.MenuDivider />
          <Navbar.MenuItem
            title="External link"
            as="a"
            href="https://www.contentful.com"
            target="_blank"
            rel="noopener noreferrer"
          />
          <Navbar.MenuDivider />
          <Navbar.MenuItem title="Log out" />
        </Navbar.Account>
      }
      aria={{
        labelMainNavigation: 'Main navigation',
        labelSecondaryNavigation: 'Secondary navigation',
        labelPromotions: 'Promotions',
        labelAccount: 'My account',
      }}
    />
  );
}
Open in Playground


function WithDifferentEnviromnmentsNavbarExample() {
  return (
    <Navbar
      mainNavigation={
        <>
          <Navbar.Item title="Content" icon={<PenNibIcon />} />
          <Navbar.Item title="Media" icon={<ImageSquareIcon />} />
          <Navbar.Item title="Apps" icon={<PuzzlePieceIcon />}>
            <Navbar.MenuItem
              title="App 1"
              icon={
                <img
                  src="https://images.ctfassets.net/iq4lnigp6fgt/72KhxI84kw1SE9gP8gDp7R/c5fa24bdc295a318018aea0ca46e2de8/forma-36-storybook-asset.png?fit=fill&f=top_left&w=32&h=32"
                  alt="app 1"
                />
              }
            />
            <Navbar.MenuItem title="App 2" />
          </Navbar.Item>
        </>
      }
      mobileNavigation={
        <>
          <Navbar.MenuItem title="Content" icon={<PenNibIcon />} />
          <Navbar.MenuItem title="Media" icon={<ImageSquareIcon />} />
          <Navbar.Submenu title="Apps" icon={<PuzzlePieceIcon />}>
            <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.Submenu>
        </>
      }
      switcher={
        <Navbar.Switcher
          isAlias={false}
          envVariant="master"
          space="my-space"
          environment="master"
        />
      }
      account={
        <Navbar.Account
          username="Conny Contentful"
          avatar="https://images.ctfassets.net/iq4lnigp6fgt/72KhxI84kw1SE9gP8gDp7R/c5fa24bdc295a318018aea0ca46e2de8/forma-36-storybook-asset.png?fit=fill&f=top_left&w=48&h=48"
          initials="CC"
          label="Account settings"
        >
          <Navbar.MenuItem title="Account settings" />
          <Navbar.MenuItem title="Dashboard" />
          <Navbar.MenuDivider />
          <Navbar.MenuItem
            title="External link"
            as="a"
            href="https://www.contentful.com"
            target="_blank"
            rel="noopener noreferrer"
          />
          <Navbar.MenuDivider />
          <Navbar.MenuItem title="Log out" />
        </Navbar.Account>
      }
      aria={{
        labelMainNavigation: 'Main navigation',
        labelSecondaryNavigation: 'Secondary navigation',
        labelPromotions: 'Promotions',
        labelAccount: 'My account',
      }}
    />
  );
}
Open in Playground


function WithAccountNotificationNavbarExample() {
  return (
    <Navbar
      mainNavigation={
        <>
          <Navbar.Item title="Content" icon={<PenNibIcon />} />
          <Navbar.Item title="Media" icon={<ImageSquareIcon />} />
          <Navbar.Item title="Apps" icon={<PuzzlePieceIcon />}>
            <Navbar.MenuItem
              title="App 1"
              icon={
                <img
                  src="https://images.ctfassets.net/iq4lnigp6fgt/72KhxI84kw1SE9gP8gDp7R/c5fa24bdc295a318018aea0ca46e2de8/forma-36-storybook-asset.png?fit=fill&f=top_left&w=32&h=32"
                  alt="app 1"
                />
              }
            />
            <Navbar.MenuItem title="App 2" />
          </Navbar.Item>
        </>
      }
      mobileNavigation={
        <>
          <Navbar.MenuItem title="Content" icon={<PenNibIcon />} />
          <Navbar.MenuItem title="Media" icon={<ImageSquareIcon />} />
          <Navbar.Submenu title="Apps" icon={<PuzzlePieceIcon />}>
            <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.Submenu>
        </>
      }
      switcher={
        <Navbar.Switcher
          isAlias={true}
          envVariant="non-master"
          space="my-space"
          environment="development"
        />
      }
      account={
        <Navbar.Account
          username="Conny Contentful"
          avatar="https://images.ctfassets.net/iq4lnigp6fgt/72KhxI84kw1SE9gP8gDp7R/c5fa24bdc295a318018aea0ca46e2de8/forma-36-storybook-asset.png?fit=fill&f=top_left&w=48&h=48"
          initials="CC"
          label="Account settings"
          hasNotification={true}
          notificationVariant="warning"
        >
          <Navbar.MenuItem title="Account settings" />
          <Navbar.MenuItem title="Dashboard" />
          <Navbar.MenuDivider />
          <Navbar.MenuItem
            title="External link"
            as="a"
            href="https://www.contentful.com"
            target="_blank"
            rel="noopener noreferrer"
          />
          <Navbar.MenuDivider />
          <Navbar.MenuItem title="Log out" />
        </Navbar.Account>
      }
      aria={{
        labelMainNavigation: 'Main navigation',
        labelSecondaryNavigation: 'Secondary navigation',
        labelPromotions: 'Promotions',
        labelAccount: 'My account',
      }}
    />
  );
}
Open in Playground


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

The Navbar component supports responsiveness. Different areas of the navbar will disappear on some breakpoints. Find the detailed information in the table below.

Prop	Description	Breakpoints	Recommended Compound Component
`logo`	Allows to overwrite the Contentful logo with a custom logo and link. This ensures a consistent and intuitive navigation experience throughout the application.	Always visible	Custom element
`mainNavigation`	Main navigation items. Each main navigation item should use the `Navbar.Item` compound component. This area is responsive and will be visible starting from the default breakpoint `867px`. This can be overwritten in the `mobileNavigationProps` and changed to `breakpoint: 'medium'` (`1024px`).	`867px` (default), configurable	`Navbar.Item`
`mobileNavigation`	Allows navigation on smaller screen devices. Visible until the default breakpoint of `867px`. Items in this area should use `Navbar.MenuItem` and `Navbar.Submenu` compound components. The breakpoint can be changed using `mobileNavigationProps` to `small: 867px` or `medium: 1024px`. You can also set a custom label for the mobile navigation trigger button.	`<867px` (default), configurable	`Navbar.MenuItem`, `Navbar.Submenu`
`secondaryNavigation`	Contains additional navigation items, like Search, Help, etc. Items in this area should use the `Navbar.Item` compound component with only an icon and no `title`. This area is responsive and will be visible starting from the breakpoint `576px`.	`576px` and up	`Navbar.Item` (icon-only)
`promotions`	In this area, you can add any additional items you want accessible on the Navbar, such as feedback links or other types of promotions. This area is responsive and will not be visible until the breakpoint `1200px`.	`1200px` and up	`Navbar.Badge` or Custom element
`switcher`	Reserved for the `Navbar.Switcher` component to display the name of the current space and environment.	Always visible	`Navbar.Switcher`
`account`	Meant for the user's account menu. Use the `Navbar.Account` compound component to build it. This area is responsive and will be visible starting from `576px`; before that, it should be made available inside the `mobileNavigation`.	`576px` and up	`Navbar.Account`

Accessibility

Each Menu.Item offers and increased click-able area and the whole navigation is accessible via keyboard.
To further improve the accessibility, each Navbar area has a aria-label. These labels can be set via the aria prop oobject. Make sure to set a label for every Menu.Item in Icon-only modus, this is used to describe the Item for visually impaired users.

Prop	Description	Default Setting
`aria.labelMainNavigation`	Aria label for the main navigation area.	`'Main Navigation'`
`aria.labelSecondaryNavigation`	Aria label for the secondary navigation area.	`'Secondary Navigation'`
`aria.labelPromotions`	Aria label for the promotions area.	`'Promotions'`
`aria.labelAccount`	Aria label for the account navigation area.	`'Account Navigation'`

Props (API reference)

Open in Storybook

Name	Type	Default
account	string number false true {} ReactElement<any, string \| JSXElementConstructor<any>> ReactNodeArray ReactPortal User Account Component
aria	{ labelMainNavigation?: string; labelSecondaryNavigation?: string; labelPromotions?: string; labelAccount?: string; } aria labels for different areas of the navigation bar
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
mobileNavigationProps	{ breakpoint?: "small" \| "medium"; label?: string; }
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
isDisabled	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.Submenu

Name	Type	Default
title required	string
children	ReactNode
icon	ReactElement<GeneratedIconProps, string \| JSXElementConstructor<any>>
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.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" "trial"
isAlias	false true
isLoading	false true
space	string
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
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

Introduction

Navbar Compound components

Navbar.Account

Navbar.Badge

Navbar.Item

Navbar.MenuItem, Navbar.MenuDivider, Navbar.MenuSectionTitle

Navbar.Submenu

Navbar.Switcher

Import

Examples

Basic usage

Complete Navbar including mobile navigation

Navbar with different environments

Navbar with account notification

Navbar loading skeleton

Navigation areas and responsive behaviour

Accessibility

Props (API reference)

Navbar

Name

Type

Default

Navbar.Item

Name

Type

Default

Navbar.Submenu

Name

Type

Default

Navbar.MenuItem

Name

Type

Default

Navbar.Switcher

Name

Type

Default

Navbar.Account

Name

Type

Default

Navbar.Badge

Name

Type

Default

Help improve this page