Navbar

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 space and environment information. Use it as a child of the Navbar switcher prop.
  7. <Navbar.Search>: Trigger for the global search. Use it as a child of the Navbar search prop.
  8. <Navbar.Help>: Trigger for the help menu. Use it as a child of the Navbar help prop.
  9. <Navbar.Account>: Trigger for the account menu. Use it as a child of the Navbar account prop.
  10. <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.
  11. <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.
  12. <Navbar.ItemSkeleton>: Loading skeleton for <Navbar.Item>. Use it as a child of the <Navbar> component or the bottomRightItems prop of Navbar.
  13. <Navbar.MenuItemSkeleton>: Loading skeleton for <Navbar.MenuItem>. Use it as a child of the <Navbar.Item>, <Navbar.Account>, or <Navbar.Help> components.
  14. <Navbar.SwitcherSkeleton>: Loading skeleton for <Navbar.Switcher>. Use it as a child of the Navbar switcher prop.
  15. <Navbar.AccountSkeleton>: Loading skeleton for <Navbar.Account>. Use it as a child of the Navbar account prop.

Basic usage

Complete Navbar

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

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

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

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

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

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

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

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