Navbar

Source @atlas-ui/navbar Figma Design guidelines

Import

import {
  Navbar,
  NavbarList,
  NavbarItem,
  NavbarButton,
  NavbarLink,
  NavbarLogo,
  NavbarDrawer,
  NavbarDropdownMenu,
  NavbarDropdownMenuItem,
  NavbarDropdownMenuItemLabel
  NavbarDropdownMenuItemEndElement,
  NavbarDropdownMenuItemStartElement,
  NavbarToggle,
  NavbarDropdownMenuGroup,
  NavbarDropdownMenuGroupHeading,
  NavbarDropdownMenuItemDescription,
  useNavbarDrawer
} from "@atlas-ui/react";

NavbarList: This component is used to align the items in the navbar.
NavbarItem: This component can contain a NavbarButton, NavbarLink or NavbarLogo.
NavbarButton: This component represents a button in the navbar and is used inside NavbarItem.
NavbarLink: This component represents a link in the navbar and is used inside NavbarItem.
NavbarLogo: This component represents a logo in the navbar and is used inside NavbarItem.
NavbarDrawer: This component is used to display the content that is hidden on smaller screens from the Navbar component.
NavbarDropdownMenu: This component is used to display a dropdown menu in the navbar.
NavbarDropdownMenuLink: This component is used to display a link in the dropdown menu.
NavbarDropdownMenuItem: This component is used to display a menu item in the dropdown menu.
NavbarDropdownMenuItemLabel: This component is used to display a label in the dropdown menu item.
NavbarDropdownMenuItemEndElement: This component is used to display an element at the end of the dropdown menu item.
NavbarDropdownMenuItemStartElement: This component is used to display an element at the start of the dropdown menu item.
NavbarToggle: This component is used to toggle the NavbarDrawer component.
NavbarDropdownMenuGroup: This component is used to group NavbarDropdownMenuItem components.
NavbarDropdownMenuGroupHeading: This component is used to display a heading in the NavbarDropdownMenuGroup component.
NavbarDropdownMenuItemDescription: This component is used to display a description in the NavbarDropdownMenuItem component.
useNavbarDrawer: This hook is used to handle the toggling of the NavbarDrawer component. It returns the state and toggleProps that should be spread on the NavbarToggle trigger.

Usage

Basic

To create a basic navbar, use the Navbar component, with a NavbarList and NavbarItem components. A NavbarItem can contain a NavbarButton, NavbarLink or NavbarLogo. The ProductLogo component can be used inside a NavbarLogo to display a product logo.

<Navbar>
  <NavbarList>
    <NavbarLogo>
      <ProductLogo appearance="sand">Atlas UI</ProductLogo>
    </NavbarLogo>
  </NavbarList>
  <NavbarList align="end">
    <NavbarItem>
      <NavbarLink href="#products">Products</NavbarLink>
    </NavbarItem>
    <NavbarItem>
      <NavbarLink href="#about">About</NavbarLink>
    </NavbarItem>
  </NavbarList>
</Navbar>

Editable example

Active item

The prop isActive can be used to indicate that a NavbarItem is active. The logic to determine if an item is active is up to the consumer of the component.

<Navbar>
  <NavbarList>
    <NavbarLogo>
      <ProductLogo appearance="sand">Atlas UI</ProductLogo>
    </NavbarLogo>
  </NavbarList>
  <NavbarList align="end">
    <NavbarItem>
      <NavbarLink href="#products" isActive>
        Products
      </NavbarLink>
    </NavbarItem>
    <NavbarItem>
      <NavbarLink href="#about">About</NavbarLink>
    </NavbarItem>
  </NavbarList>
</Navbar>

Editable example

Aligning items

The Navbar component can contain multiple NavbarList components to align items in the navbar. The prop align can be used to align the items in a NavbarList to the start or end of the navbar.

<Navbar>
  <NavbarList align="start">
    <NavbarLogo>
      <ProductLogo appearance="sand">Atlas UI</ProductLogo>
    </NavbarLogo>
    <NavbarItem>
      <NavbarLink href="#products">Products</NavbarLink>
    </NavbarItem>
  </NavbarList>
  <NavbarList align="end">
    <NavbarItem>
      <NavbarLink href="#about">About</NavbarLink>
    </NavbarItem>
  </NavbarList>
</Navbar>

Editable example

To display actions instead of links in the navbar, use the NavbarButton component inside a NavbarItem.

<Navbar>
  <NavbarList>
    <NavbarLogo>
      <ProductLogo appearance="sand">Atlas UI</ProductLogo>
    </NavbarLogo>
  </NavbarList>
  <NavbarList align="end">
    <NavbarItem>
      <NavbarButton
        onPress={() => {
          alert("Sign in button pressed");
        }}
      >
        Sign in
      </NavbarButton>
    </NavbarItem>
  </NavbarList>
</Navbar>

Editable example

Navbar exposes a set of components that can be used to create a dropdown menu with actions:

NavbarDropdown: The main container for the dropdown menu.
NavbarDropdownMenuItem: A menu item in the dropdown menu.
NavbarDropdownMenuItemLabel: A label in the dropdown menu item.

To display a dropdown menu, follow these steps:

Add the NavbarDropdownMenu component.
Use the trigger prop on NavbarDropdownMenu to render the trigger element. The trigger prop is a function that receives the triggerProps and isOpen as arguments. The triggerProps should be spread on the trigger element. The trigger should be a NavbarItem with a NavbarButton inside.
Use the NavbarDropdownMenuItem and NavbarDropdownMenuItemLabel components to display the menu items.
Add the NavbarDropdownMenuItem components inside the NavbarDropdownMenu component.

<Navbar>
  <NavbarList>
    <NavbarLogo>
      <ProductLogo appearance="sand">Atlas UI</ProductLogo>
    </NavbarLogo>
  </NavbarList>
  <NavbarList align="end">
    <NavbarDropdownMenu
      trigger={({ triggerProps, isOpen }) => {
        return (
          <NavbarItem>
            <NavbarButton {...triggerProps} isOpen={isOpen}>
              Products
            </NavbarButton>
          </NavbarItem>
        );
      }}
    >
      <NavbarDropdownMenuItem
        onPress={() => {
          alert("Lauch product 1");
        }}
      >
        <NavbarDropdownMenuItemLabel>Product 1</NavbarDropdownMenuItemLabel>
      </NavbarDropdownMenuItem>
      <NavbarDropdownMenuItem
        onPress={() => {
          alert("Lauch product 2");
        }}
      >
        <NavbarDropdownMenuItemLabel>Product 2</NavbarDropdownMenuItemLabel>
      </NavbarDropdownMenuItem>
    </NavbarDropdownMenu>
  </NavbarList>
</Navbar>

Editable example

Using the NavbarDropdownMenuLink component ensures that the dropdown menu item within the navbar is rendered as an anchor element and behaves according to the configured routing system:

<Navbar>
  <NavbarLink href="#">Home</NavbarLink>
  <NavbarDropdownMenu
    trigger={({ triggerProps }) => {
      return (
        <NavbarItem>
          <NavbarButton {...triggerProps}>Products</NavbarButton>
        </NavbarItem>
      );
    }}
  >
    <NavbarDropdownMenuLink href="#">
      <NavbarDropdownMenuItemLabel>First product</NavbarDropdownMenuItemLabel>
    </NavbarDropdownMenuLink>
    <NavbarDropdownMenuLink href="#">
      <NavbarDropdownMenuItemLabel>Second product</NavbarDropdownMenuItemLabel>
    </NavbarDropdownMenuLink>
  </NavbarDropdownMenu>
</Navbar>

Editable example

Alternatively, setting the as prop of the NavbarDropdownMenuItem to a can be used to display links using the prop as and href. Follow the same steps as in the previous example.

<Navbar>
  <NavbarList>
    <NavbarLogo>
      <ProductLogo appearance="sand">Atlas UI</ProductLogo>
    </NavbarLogo>
  </NavbarList>
  <NavbarList align="end">
    <NavbarDropdownMenu
      trigger={({ triggerProps, isOpen }) => {
        return (
          <NavbarItem>
            <NavbarButton {...triggerProps} isOpen={isOpen}>
              Products
            </NavbarButton>
          </NavbarItem>
        );
      }}
    >
      <NavbarDropdownMenuItem as="a" href="#product-1">
        <NavbarDropdownMenuItemLabel>Product 1</NavbarDropdownMenuItemLabel>
      </NavbarDropdownMenuItem>
      <NavbarDropdownMenuItem as="a" href="#product-2">
        <NavbarDropdownMenuItemLabel>Product 2</NavbarDropdownMenuItemLabel>
      </NavbarDropdownMenuItem>
    </NavbarDropdownMenu>
  </NavbarList>
</Navbar>

Editable example

NavbarDropdownMenu supports nested dropdown menus.

<Navbar>
  <NavbarList>
    <NavbarLogo>
      <ProductLogo appearance="sand">Atlas UI</ProductLogo>
    </NavbarLogo>
  </NavbarList>
  <NavbarList align="end">
    <NavbarDropdownMenu
      trigger={({ triggerProps, isOpen }) => {
        return (
          <NavbarItem>
            <NavbarButton {...triggerProps} isOpen={isOpen}>
              Products
            </NavbarButton>
          </NavbarItem>
        );
      }}
    >
      <NavbarDropdownMenuItem
        onPress={() => {
          alert("Lauch product 1");
        }}
      >
        <NavbarDropdownMenuItemLabel>Product 1</NavbarDropdownMenuItemLabel>
      </NavbarDropdownMenuItem>
      <NavbarDropdownMenu
        trigger={({ triggerProps }) => {
          return (
            <NavbarDropdownMenuItem {...triggerProps}>
              <NavbarDropdownMenuItemLabel>
                More products
              </NavbarDropdownMenuItemLabel>
              <NavbarDropdownMenuItemEndElement>
                <ChevronLgRightOutlineIcon />
              </NavbarDropdownMenuItemEndElement>
            </NavbarDropdownMenuItem>
          );
        }}
      >
        <NavbarDropdownMenuItem
          onPress={() => {
            alert("Lauch product 2");
          }}
        >
          <NavbarDropdownMenuItemLabel>Product 2</NavbarDropdownMenuItemLabel>
        </NavbarDropdownMenuItem>
        <NavbarDropdownMenuItem
          onPress={() => {
            alert("Lauch product 3");
          }}
        >
          <NavbarDropdownMenuItemLabel>Product 3</NavbarDropdownMenuItemLabel>
        </NavbarDropdownMenuItem>
      </NavbarDropdownMenu>
    </NavbarDropdownMenu>
  </NavbarList>
</Navbar>

Editable example

Responsive

Important information

The responsive examples are displayed on a separate page to showcase their functionality without interfering with the documentation.

Hiding content

The Navbar component can be made responsive by hiding elements on smaller screens and displaying them in the NavbarDrawer component. This can be done by using media queries. For exmaple, to show the NavbarToggle on smaller screens and hide it on larger screens, add the following CSS:

@media (min-width: 769px) {
  .hideOnDesktop {
    display: none;
  }
}

Demo

See the Navbar responsive page for a live demo.

Drawer

The NavbarDrawer component can be used to display the content that is hidden on smaller screens from the Navbar component. To handle the toggling of the NavbarDrawer, useNavbarDrawer hook can be used.

const { state, toggleProps } = useNavbarDrawer();

toggleProps: Props to be spread on the NavbarToggle trigger.
state: Props to be spread on the NavbarDrawer. The state object has the following properties:
- isOpen: Boolean determining if the NavbarDrawer is open.
- close: Function to close the NavbarDrawer.

Demo

See the Navbar with Drawer page for a live demo.

Drawer with menus

The NavbarDrawer component can include a NavbarDropdownMenu component to display a menu in the drawer.

Demo

See the Navbar with Drawer with menu page for a live demo.

Accessibility

Users can navigate the navbar using the keyboard. The following keys are supported:

ArrowLeft: Focus the previous item in the navbar. If the focus is on the first item in the navbar, the focus will move to the last item.
ArrowRight: Focus the next item in the navbar. If the focus is on the last item in the navbar, the focus will move to the first item.
Home: Focus the first item in the navbar.
End: Focus the last item in the navbar.
Space\Enter: Activate the focused item in the navbar. Or open the dropdown menu if the focused item is a NavbarDropdownMenu.

If the focus is on a NavbarItem and the user presses Tab the focus will move to the next focusable element on the page.

Props

NavbarButton Props
Prop	Default	Type
`isActive`	-	`boolean`
`isOpen`	-	`boolean`
`startIcon`	-	`ReactNode`
`endIcon`	-	`ReactNode`
`as`	-	`ElementType` The HTML element or React element used to render the button, e.g. 'div' or 'a'
`autoFocus`	-	`boolean` Whether the element should receive focus on render.
`id`	-	`string` The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
`rel`	-	`string` The relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel).
`aria-controls`	-	`string` Identifies the element (or elements) whose contents or presence are controlled by the current element.
`aria-describedby`	-	`string` Identifies the element (or elements) that describes the object.
`aria-details`	-	`string` Identifies the element (or elements) that provide a detailed, extended description for the object.
`aria-expanded`	-	`boolean \| "true" \| "false"` Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.
`aria-haspopup`	-	`boolean \| "dialog" \| "menu" \| "true" \| "false" \| "grid" \| "listbox" \| "tree"` Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.
`aria-label`	-	`string` Defines a string value that labels the current element.
`aria-labelledby`	-	`string` Identifies the element (or elements) that labels the current element.
`aria-pressed`	-	`boolean \| "true" \| "false" \| "mixed"` Indicates the current "pressed" state of toggle buttons.
`onFocus`	-	`(e: FocusEvent<Element, Element>) => void` Handler that is called when the element receives focus.
`onBlur`	-	`(e: FocusEvent<Element, Element>) => void` Handler that is called when the element loses focus.
`onKeyDown`	-	`(e: KeyboardEvent) => void` Handler that is called when a key is pressed.
`onKeyUp`	-	`(e: KeyboardEvent) => void` Handler that is called when a key is released.
`isDisabled`	-	`boolean` Whether the button is disabled.
`onPress`	-	`(e: PressEvent) => void` Handler that is called when the press is released over the target.
`onPressStart`	-	`(e: PressEvent) => void` Handler that is called when a press interaction starts.
`onPressEnd`	-	`(e: PressEvent) => void` Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target.
`onPressChange`	-	`(isPressed: boolean) => void` Handler that is called when the press state changes.
`onPressUp`	-	`(e: PressEvent) => void` Handler that is called when a press is released over the target, regardless of whether it started on the target or not.
`onFocusChange`	-	`(isFocused: boolean) => void` Handler that is called when the element's focus status changes.
`href`	-	`string` A URL to link to if elementType="a".
`target`	-	`string` The target window for the link.
`type`	`"'button'"`	`"button""submit""reset"` The behavior of the button when used in an HTML form.
`preventFocusOnPress`	-	`boolean` Whether to prevent focus from moving to the button when pressing it. Caution, this can make the button inaccessible and should only be used when alternative keyboard interaction is provided, such as ComboBox's MenuTrigger or a NumberField's increment/decrement control.
`excludeFromTabOrder`	-	`boolean` Whether to exclude the element from the sequential tab order. If true, the element will not be focusable via the keyboard by tabbing. This should be avoided except in rare scenarios where an alternative means of accessing the element or its functionality via the keyboard is available.

NavbarLink Props
Prop	Default	Type
`isActive`	-	`boolean`
`rel`	-	`string` The relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel).
`aria-describedby`	-	`string` Identifies the element (or elements) that describes the object. @see aria-labelledby
`aria-details`	-	`string` Identifies the element (or elements) that provide a detailed, extended description for the object. Identifies the element that provides a detailed, extended description for the object. @see aria-describedby.
`aria-label`	-	`string` Defines a string value that labels the current element. @see aria-labelledby.
`aria-labelledby`	-	`string` Identifies the element (or elements) that labels the current element. @see aria-describedby.
`onFocus`	-	`(e: FocusEvent<Element, Element>) => void` Handler that is called when the element receives focus.
`onBlur`	-	`(e: FocusEvent<Element, Element>) => void` Handler that is called when the element loses focus.
`onKeyDown`	-	`(e: KeyboardEvent) => void` Handler that is called when a key is pressed.
`onKeyUp`	-	`(e: KeyboardEvent) => void` Handler that is called when a key is released.
`isDisabled`	-	`boolean` Whether the link is disabled.
`onPress`	-	`(e: PressEvent) => void` Handler that is called when the press is released over the target.
`onPressStart`	-	`(e: PressEvent) => void` Handler that is called when a press interaction starts.
`onPressEnd`	-	`(e: PressEvent) => void` Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target.
`onPressChange`	-	`(isPressed: boolean) => void` Handler that is called when the press state changes.
`onPressUp`	-	`(e: PressEvent) => void` Handler that is called when a press is released over the target, regardless of whether it started on the target or not.
`onFocusChange`	-	`(isFocused: boolean) => void` Handler that is called when the element's focus status changes.
`href`	-	`string` A URL to link to. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href).
`target`	-	`HTMLAttributeAnchorTarget` The target window for the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target).
`hrefLang`	-	`string` Hints at the human language of the linked URL. See[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#hreflang).
`download`	-	`string \| boolean` Causes the browser to download the linked URL. A string may be provided to suggest a file name. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download).
`ping`	-	`string` A space-separated list of URLs to ping when the link is followed. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#ping).
`referrerPolicy`	-	`"""origin""no-referrer""no-referrer-when-downgrade""origin-when-cross-origin""same-origin""strict-origin""strict-origin-when-cross-origin""unsafe-url"` How much of the referrer to send when following the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#referrerpolicy).
`routerOptions`	-	`never` Options for the configured client side router.
`asChild`	-	`boolean` Link props and styles will be applied to a child element. The Link component will not render an anchor element.

NavbarList Props
Prop	Default	Type
`align`	-	`"center""start""end"`

NavbarToggle Props
Prop	Default	Type
`isOpen`	-	`boolean`
`isDefaultOpen`	-	`boolean`
`onOpenChange`	-	`(isOpen: boolean) => void`
`as`	-	`ElementType` The HTML element or React element used to render the button, e.g. 'div' or 'a'
`autoFocus`	-	`boolean` Whether the element should receive focus on render.
`id`	-	`string` The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
`rel`	-	`string` The relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel).
`aria-controls`	-	`string` Identifies the element (or elements) whose contents or presence are controlled by the current element.
`aria-describedby`	-	`string` Identifies the element (or elements) that describes the object.
`aria-details`	-	`string` Identifies the element (or elements) that provide a detailed, extended description for the object.
`aria-expanded`	-	`boolean \| "true" \| "false"` Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.
`aria-haspopup`	-	`boolean \| "dialog" \| "menu" \| "true" \| "false" \| "grid" \| "listbox" \| "tree"` Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.
`aria-label`	-	`string` Defines a string value that labels the current element.
`aria-labelledby`	-	`string` Identifies the element (or elements) that labels the current element.
`aria-pressed`	-	`boolean \| "true" \| "false" \| "mixed"` Indicates the current "pressed" state of toggle buttons.
`onFocus`	-	`(e: FocusEvent<Element, Element>) => void` Handler that is called when the element receives focus.
`onBlur`	-	`(e: FocusEvent<Element, Element>) => void` Handler that is called when the element loses focus.
`onKeyDown`	-	`(e: KeyboardEvent) => void` Handler that is called when a key is pressed.
`onKeyUp`	-	`(e: KeyboardEvent) => void` Handler that is called when a key is released.
`isDisabled`	-	`boolean` Whether the button is disabled.
`onPress`	-	`(e: PressEvent) => void` Handler that is called when the press is released over the target.
`onPressStart`	-	`(e: PressEvent) => void` Handler that is called when a press interaction starts.
`onPressEnd`	-	`(e: PressEvent) => void` Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target.
`onPressChange`	-	`(isPressed: boolean) => void` Handler that is called when the press state changes.
`onPressUp`	-	`(e: PressEvent) => void` Handler that is called when a press is released over the target, regardless of whether it started on the target or not.
`onFocusChange`	-	`(isFocused: boolean) => void` Handler that is called when the element's focus status changes.
`href`	-	`string` A URL to link to if elementType="a".
`target`	-	`string` The target window for the link.
`type`	`"'button'"`	`"button""submit""reset"` The behavior of the button when used in an HTML form.
`preventFocusOnPress`	-	`boolean` Whether to prevent focus from moving to the button when pressing it. Caution, this can make the button inaccessible and should only be used when alternative keyboard interaction is provided, such as ComboBox's MenuTrigger or a NumberField's increment/decrement control.
`excludeFromTabOrder`	-	`boolean` Whether to exclude the element from the sequential tab order. If true, the element will not be focusable via the keyboard by tabbing. This should be avoided except in rare scenarios where an alternative means of accessing the element or its functionality via the keyboard is available.

NavbarDropdownMenu Props
Prop	Default	Type
`trigger`	-	`(props: RenderPropsValues) => ReactNode`
`anchorRef`	-	`RefObject<HTMLButtonElement>`
`triggerRef`	-	`RefObject<HTMLElement>`
`isOpen`	-	`boolean`
`onOpenChange`	-	`(isOpen: boolean) => void`
`defaultIsOpen`	-	`boolean`
`placement`	-	`"top""right""bottom""left""top-start""top-end""right-start""right-end""bottom-start""bottom-end""left-start""left-end"`
`disallowCloseOnPress`	-	`boolean`
`openOnHover`	-	`boolean`
`hasLoop`	-	`boolean`
`isVirtual`	-	`boolean`
`initialFocus`	-	`number`
`onNavigate`	-	`(index: number) => void`

NavbarDropdownMenuItem Props
Prop	Default	Type
`autoFocus`	-	`boolean` Whether the element should receive focus on render.
`id`	-	`string` The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
`rel`	-	`string` The relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel).
`aria-controls`	-	`string` Identifies the element (or elements) whose contents or presence are controlled by the current element.
`aria-describedby`	-	`string` Identifies the element (or elements) that describes the object.
`aria-details`	-	`string` Identifies the element (or elements) that provide a detailed, extended description for the object.
`aria-expanded`	-	`boolean \| "true" \| "false"` Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.
`aria-haspopup`	-	`boolean \| "dialog" \| "menu" \| "true" \| "false" \| "grid" \| "listbox" \| "tree"` Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.
`aria-label`	-	`string` Defines a string value that labels the current element.
`aria-labelledby`	-	`string` Identifies the element (or elements) that labels the current element.
`aria-pressed`	-	`boolean \| "true" \| "false" \| "mixed"` Indicates the current "pressed" state of toggle buttons.
`children`	-	`ReactNode` The content to display in the button.
`onFocus`	-	`(e: FocusEvent<Element, Element>) => void` Handler that is called when the element receives focus.
`onBlur`	-	`(e: FocusEvent<Element, Element>) => void` Handler that is called when the element loses focus.
`onKeyDown`	-	`(e: KeyboardEvent) => void` Handler that is called when a key is pressed.
`onKeyUp`	-	`(e: KeyboardEvent) => void` Handler that is called when a key is released.
`as`	-	`ElementType` The HTML element or React element used to render the button, e.g. 'div', 'a', or RouterLink.
`isDisabled`	-	`boolean` Whether the button is disabled.
`onPress`	-	`(e: PressEvent) => void` Handler that is called when the press is released over the target.
`onPressStart`	-	`(e: PressEvent) => void` Handler that is called when a press interaction starts.
`onPressEnd`	-	`(e: PressEvent) => void` Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target.
`onPressChange`	-	`(isPressed: boolean) => void` Handler that is called when the press state changes.
`onPressUp`	-	`(e: PressEvent) => void` Handler that is called when a press is released over the target, regardless of whether it started on the target or not.
`onFocusChange`	-	`(isFocused: boolean) => void` Handler that is called when the element's focus status changes.
`href`	-	`string` A URL to link to if elementType="a".
`target`	-	`string` The target window for the link.
`type`	`"'button'"`	`"button""submit""reset"` The behavior of the button when used in an HTML form.
`preventFocusOnPress`	-	`boolean` Whether to prevent focus from moving to the button when pressing it. Caution, this can make the button inaccessible and should only be used when alternative keyboard interaction is provided, such as ComboBox's MenuTrigger or a NumberField's increment/decrement control.
`excludeFromTabOrder`	-	`boolean` Whether to exclude the element from the sequential tab order. If true, the element will not be focusable via the keyboard by tabbing. This should be avoided except in rare scenarios where an alternative means of accessing the element or its functionality via the keyboard is available.
`isSelected`	-	`boolean`
`isPressed`	-	`boolean`
`asChild`	-	`boolean`

NavbarDrawer Props
Prop	Default	Type
`state`	-	`NavbarDrawerState`

NavbarDropdownMenuGroup Props
Prop	Default	Type
`as`	-	`ElementType` The HTML element or React element used to render the button, e.g. 'div', 'a', or RouterLink.
`hasDivider`	-	`boolean` It applies a border to the last child of the section.

NavbarDropdownMenuGroupHeading Props
Prop	Default	Type
`as`	-	`ElementType` The HTML element or React element used to render the button, e.g. 'div', 'a', or RouterLink.

Navbar

Import

Usage

Basic

Active item

Aligning items

Navbar with actions

Responsive

Hiding content

Drawer

Drawer with menus

Accessibility

Keyboard navigation

Props

Import​

Usage​

Basic​

Active item​

Aligning items​

Navbar with actions​

Navbar with dropdown actions​

Navbar with dropdown links​

Navbar with dropdown and submenu​

Responsive​

Hiding content​

Drawer​

Drawer with menus​

Accessibility​

Keyboard navigation​

Props​

Import

Usage

Basic

Active item

Aligning items

Navbar with actions

Navbar with dropdown actions

Navbar with dropdown links

Navbar with dropdown and submenu

Responsive

Hiding content

Drawer

Drawer with menus

Accessibility

Keyboard navigation

Props