Forma 36

Navbar

Give feedback

The Navbar component offers a unified navigation experience across all of Contentful's products. It consists of a top and bottom section, each serving specific purposes. The bottom section is dedicated to navigation items, while the top section provides additional context and actions. This ensures a consistent and intuitive navigation experience throughout the application.

Import

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

Examples

You can use following components to build a menu:

  1. <Navbar>: The main wrapper component.
  2. <Navbar.Item>: Represents a main navigation item. Use it as a child of the <Navbar> component or the bottomRightItems prop of Navbar.
  3. <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.
  4. <Navbar.MenuDivider>: A visual separator for menu items. Use it before or after a <Navbar.MenuItem>.
  5. <Navbar.MenuSectionTitle>: A title that can be used in the menu list. Use it before or after a <Navbar.MenuItem>.
  6. <Navbar.Switcher>: Wrapper component for the logotype, organization, space, and environment information. Use it as a child of the Navbar switcher prop.
  7. <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>.
  8. <Navbar.Search>: Trigger for the global search. Use it as a child of the Navbar search prop.
  9. <Navbar.Help>: Trigger for the help menu. Use it as a child of the Navbar help prop.
  10. <Navbar.Account>: Trigger for the account menu. Use it as a child of the Navbar account prop.
  11. <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.
  12. <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.
  13. <Navbar.ItemSkeleton>: Loading skeleton for <Navbar.Item>. Use it as a child of the <Navbar> component or the bottomRightItems prop of Navbar.
  14. <Navbar.MenuItemSkeleton>: Loading skeleton for <Navbar.MenuItem>. Use it as a child of the <Navbar.Item>, <Navbar.Account>, or <Navbar.Help> components.
  15. <Navbar.SwitcherSkeleton>: Loading skeleton for <Navbar.Switcher>. Use it as a child of the Navbar switcher prop.
  16. <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/72KhxI84kw1SE9gP8gDp7R/c5fa24bdc295a318018aea0ca46e2de8/forma-36-storybook-asset.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/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>

    </Navbar>

  );

}

Open in Playground

Complete 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/72KhxI84kw1SE9gP8gDp7R/c5fa24bdc295a318018aea0ca46e2de8/forma-36-storybook-asset.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/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>

    </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/72KhxI84kw1SE9gP8gDp7R/c5fa24bdc295a318018aea0ca46e2de8/forma-36-storybook-asset.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/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>

    </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/72KhxI84kw1SE9gP8gDp7R/c5fa24bdc295a318018aea0ca46e2de8/forma-36-storybook-asset.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/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>

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

  );

}

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

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

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

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

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

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

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

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

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

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

Help improve this page

Edit on GithubRead the contribution guide