Navbar

A responsive navigation header positioned on top side of your page that includes support for branding, links, navigation, collapse and more.

import { Navbar } from "@nextui-org/react";

Anatomy

Navbar: The wrapper that provides state and general context management.
Navbar.Brand: A simple and flexible wrapper for branding content.
Navbar.Content: The wrapper that provides the state and variants for the navbar content items.
Navbar.Item: The individual items. Must be a direct child of Navbar.Content.
Navbar.Link: A link item. Must be a direct child of Navbar.Content.
Navbar.Toggle: The toggle button that toggles the navbar. Must be a direct child of Navbar.
Navbar.Collapse: The collapse wrapper that provides the state and menu for the navbar collapse items.
Navbar.CollapseItem: The individual items. Must be a direct child of Navbar.Collapse.

Variants

Navbar can be styled with different variants. The default variant is static, but you can also use floating and sticky.

Active Item Variants

The navbar content active items can be styled with different variants. You can apply the variant and activeColor either to the Navbar.Content or Navbar.Item.

Bordered

You can add a border to the navbar with the isBordered prop.

Compact

You can reduce the height and amount of padding that navbar contains by using the isCompact property.

Hide on scroll

By using the shouldHideOnScroll the navbar hides on scroll down to leave more space for content.

Cursor Highlight

You can highlight the navbar content items when the cursor is over them with the enableCursorHighlight prop.

With Toggle Button

You can show a collapse menu by adding the Navbar.Toggle and Navbar.Collapse components to the navbar.

You can use the Dropdown component as navbar item to show a dropdown menu.

With Avatar User

A common use case is to display the user's avatar in the navbar. To achieve this, you can use the Avatar component as navbar item or combine it with the Dropdown to show a dropdown menu.

With Search Input

Another common use case is to display a search input in the navbar. You can do this by using the Input component as navbar item.

Disable collapse animation

By adding the disableAnimation prop to the Navbar.Collapse you can disable the animation of the collapse menu and its items when it is opened or closed.

APIs

Attribute	Type	Description	Default
children*	`ReactNode` `ReactNode[]`	The content of the navbar. It's usually the brand, content, toggle and collapse.	-
parentRef	`RefObject<HTMLElement>`	The parent element where the navbar is placed within. This is used to determine the scroll position and whether the navbar should be hidden or not.	`window`
variant	NavbarVariants	The navbar positions variations.	`static`
height	`number` `string`	The height of the navbar. When the navbar is compacted (isCompact=`true`) the height is reduced to `54px`.	`76px`
maxWidth	NavbarMaxWidth	The navbar maximum width.	`lg`
isBordered	`boolean`	Whether the navbar should be bordered.	`false`
isCompact	`boolean`	Whether the navbar should be compact. It reduces the height to `54px`.	`false`
borderWeight	NormalWeights	The border weight of the bordered navbar.	`light`
shouldHideOnScroll	`boolean`	Whether the navbar should hide on scroll or not.	`false`
disableShadow	`boolean`	Whether the navbar should have a shadow or not.	`false`
disableBlur	`boolean`	Whether the navbar should be blurred or not. (only supported by this browser list	`false`
disableScrollHandler	`boolean`	Whether the navbar parent scroll event should be listened to or not.	`false`
containerCss	`Stitches.CSS`	The css object of the navbar container.	-
css	`Stitches.CSS`	Override Default CSS style.	-
as	`keyof JSX.IntrinsicElements`	Changes which tag component outputs.	`nav`

Attribute	Type	Description	Default
onScrollPositionChange	`(scrollPosition: number) => void`	The scroll event handler for the navbar. The event fires when the navbar parent element is scrolled. it only works if `disableScrollHandler` is set to `false` or `shouldHideOnScroll` is set to `true`.	-

Navbar.Brand Props

Attribute	Type	Description	Default
children	`ReactNode` `ReactNode[]`	The content of the navbar brand. It's usually the logo and name of the brand.	-
hideIn	HideShowIn	Sets the breakpoint from where the component should start hiding.	-
showIn	HideShowIn	Sets the breakpoint from where the component should start displaying.	-
css	`Stitches.CSS`	Override Default CSS style.	-
as	`keyof JSX.IntrinsicElements`	Changes which tag component outputs.	`span`

Navbar.Content Props

Attribute	Type	Description	Default
children	`ReactNode` `ReactNode[]`	The content of the navbar content. It's usually the navbar item and navbar link.	-
variant	NavbarContentVariants	The variant of the navbar content items.	`default`
gap	`number` `string` CSSGapUnit	The gap between each content item. It's `0px` for highlight variants.	`$10`
activeColor	SimpleColors	The active color of the navbar content items.	`default (link)`
underlineHeight	NormalWeights	The height of the navbar content items's underline.	`normal`
enableCursorHighlight	NormalWeights	Whether the navbar content highlighted cursor should be visible.	`false`
isCursorHighlightRounded	NormalWeights	Whether the navbar content highlighted cursor should be rounded.	`false`
hideIn	HideShowIn	Sets the breakpoint from where the component should start hiding.	-
showIn	HideShowIn	Sets the breakpoint from where the component should start displaying.	-
css	`Stitches.CSS`	Override Default CSS style.	-
as	`keyof JSX.IntrinsicElements`	Changes which tag component outputs.	`ul`

Navbar.Item Props

Attribute	Type	Description	Default
children*	`ReactNode`	The contents of the navbar item.	-
variant	NavbarContentVariants	The variant of the navbar item.	`default`
activeColor	SimpleColors	The active color of the navbar item.	`default (link)`
underlineHeight	NormalWeights	The height of the navbar item underline.	`normal`
isActive	`boolean`	Whether navbar item is active.	`false`
isDisabled	`boolean`	Whether navbar item is disabled.	`false`
hideIn	HideShowIn	Sets the breakpoint from where the component should start hiding.	-
showIn	HideShowIn	Sets the breakpoint from where the component should start displaying.	-
css	`Stitches.CSS`	Override Default CSS style.	-
as	`keyof JSX.IntrinsicElements`	Changes which tag component outputs.	`li`

Navbar.Link Props

Attribute	Type	Description	Default
ItemProps	NavbarItemProps	Since dropdown navbar link is based on the `Navbar.Item` component you can use any of the `Navbar.Item` props.	-
LinkProps	LinkProps	Since dropdown navbar link uses the `Link` component as a base, you can use any of the `Link` props.	-
itemCss	`Stitches.CSS`	Override the navbar item CSS style.	-
itemClassName	`string`	Add a class name to the navbar item.	-
css	`Stitches.CSS`	Override Default CSS style.	-
as	`keyof JSX.IntrinsicElements`	Changes which tag component outputs.	`a`

Navbar.Toggle Props

Attribute	Type	Description	Default
children	`ReactNode`	The contents of the navbar toggle. It's usually an hamburguer icon button.	-
isSelected	HideShowIn	Whether the element should be selected (controlled).	`false`
defaultSelected	HideShowIn	Whether the element should be selected (uncontrolled).	-
autoFocus	HideShowIn	Whether the element should receive focus on render.	`false`
hideIn	HideShowIn	Sets the breakpoint from where the component should start hiding.	-
showIn	HideShowIn	Sets the breakpoint from where the component should start displaying.	-
css	`Stitches.CSS`	Override Default CSS style.	-
as	`keyof JSX.IntrinsicElements`	Changes which tag component outputs.	`button`

Navbar.Toggle Events

Attribute	Type	Description	Default
onChange	`(isSelected: boolean) => void`	Handler that is called when the element's selection state changes.	-

Navbar.Toggle Accessibility Props

Attribute	Type	Description	Default
id	`string`	The element's unique identifier. See MDN	-
aria-label	`string`	Defines a string value that labels the current element	-

Navbar.Collapse Props

Attribute	Type	Description	Default
children	`ReactNode` `ReactNode[]`	The contents of the navbar toggle. It's usually an hamburguer icon button.	-
transitionDelay	`number`	The delay of all collapse items transition. (milliseconds)	`0`
transitionTime	`number`	The delay of all collapse items transition. (milliseconds)	`450`
transitionMatrix	CollapseTransitionMatrix	The matrix of all collapse items transition.	`{in: "matrix(1, 0, 0, 1, 0, 0)", out: "matrix(0.97, 0, 0, 1, 0, 20)"}`
disableAnimation	`boolean`	Whether the all navbar collapse items are animated.	`false`
hideIn	HideShowIn	Sets the breakpoint from where the component should start hiding.	-
showIn	HideShowIn	Sets the breakpoint from where the component should start displaying.	-
css	`Stitches.CSS`	Override Default CSS style.	-
as	`keyof JSX.IntrinsicElements`	Changes which tag component outputs.	`ul`

Navbar.Collapse Accessibility Props

Attribute	Type	Description	Default
id	`string`	The element's unique identifier. See MDN	-
aria-labelledby	`string`	Identifies the element (or elements) that labels the current element	-
aria-describedby	`string`	Identifies the element (or elements) that describes the object.	-

Navbar.CollapseItem

Attribute	Type	Description	Default
children	`ReactNode` `ReactNode[]`	The contents of the navbar toggle. It's usually an hamburguer icon button.	-
transitionDelay	`number`	The delay of all collapse items transition. (milliseconds)	`0`
transitionTime	`number`	The delay of all collapse items transition. (milliseconds)	`450`
transitionMatrix	CollapseTransitionMatrix	The matrix of all collapse items transition.	`{in: "matrix(1, 0, 0, 1, 0, 0)", out: "matrix(0.97, 0, 0, 1, 0, 20)"}`
disableAnimation	`boolean`	Whether the navbar collapse item is animated.	`false`
hideIn	HideShowIn	Sets the breakpoint from where the component should start hiding.	-
showIn	HideShowIn	Sets the breakpoint from where the component should start displaying.	-
css	`Stitches.CSS`	Override Default CSS style.	-
as	`keyof JSX.IntrinsicElements`	Changes which tag component outputs.	`li`

type NavbarVariants = "static" | "sticky" | "floating";

type NavbarMaxWidth = "xs" | "sm" | "md" | "lg" | "xl" | "fluid";

Note: fluid means the navbar will fill the entire width of the screen. You can see the complete breakpoint list here.

Hide In & Show In

type HideIn = "xsMax" | "smMax" | "mdMax" | "lgMax" | "xlMax";
type ShowIn = "xsMin" | "smMin" | "mdMin" | "lgMin" | "xlMin";

Note: You can see the complete media breakpoint list here.

type NavbarVariants =
  | "default"
  | "underline"
  | "underline-rounded"
  | "highlight"
  | "highlight-solid"
  | "highlight-rounded"
  | "highlight-solid-rounded";

Note: You can try the complete list of item variants here.

Collapse Transition Matrix

type CollapseTransitionMatrix = {
  in?: string;
  out?: string;
};

Note: For more information about the transition matrix, check the transition matrix documentation.

Simple Colors

type SimpleColors =
  | "default"
  | "primary"
  | "secondary"
  | "success"
  | "warning"
  | "error";

Normal Weights

type NormalWeights = "light" | "normal" | "bold" | "extrabold" | "black";

Collapse Badge

Created by Junior Garcia

Deployed on

Documentation