Navbar
A wrapper for Nav that is generally used for the top navigation of a page.
Import
import { Navbar, Nav } from 'rsuite';NavbarThe navigation bar component.Navbar.BrandSet up your brand, which can be the name of your company, product, or project.Navbar.ContentNavigation bar content container, group a set of elements together.Navbar.ToggleButton to show drawer menu on small screens.Navbar.DrawerDrawer menu container.
Examples
Default
The most basic usage of the navigation bar, including brand and navigation items.
Appearance
Switch between different visual styles of the navigation bar using the appearance property.
Search
Integrate a search box into the navigation bar.
Sub Nav
Show a navigation bar with a secondary menu.
Mega Menu
Display a navigation bar with a large dropdown menu.
With Popover Menu
Show additional navigation items using a popover menu.
With Drawer
Display navigation items in a drawer menu on small screens.
Responsive
The navigation bar supports responsive layouts and adapts to different screen sizes.
You can use the showFrom and hideFrom props to control the visibility at different breakpoints:
// Hide on screens larger than 'xs'
<Navbar.Content hideFrom="xs">
{/* Content for small screens */}
</Navbar.Content>
// Hide on screens smaller than 'xs'
<Navbar.Content showFrom="xs">
{/* Content for large screens */}
</Navbar.Content>Props
<Navbar>
| Property name | Type (Default) |
Description |
|---|---|---|
| appearance | 'default' | 'inverse' | 'subtle'('default') |
Navigation bar appearance |
| as | ElementType ('nav') |
Custom element type |
| classPrefix | string ('navbar') |
The prefix of the component CSS class |
| drawerOpen | boolean | Control the open state of the drawer menu |
| onDrawerOpenChange | (open: boolean) => void | Callback when drawer menu opens or closes |
<Navbar.Brand>
| Property name | Type (Default) |
Description |
|---|---|---|
| as | ElementType ('a') |
Custom element type |
| children | ReactNode | Brand content |
| classPrefix | string ('navbar-brand') |
The prefix of the CSS class |
| href | string | The URL of the brand link |
<Navbar.Content>
| Property name | Type (Default) |
Description |
|---|---|---|
| as | ElementType ('div') |
Custom element type |
| children | ReactNode | (({ onClose }: { onClose: () => void }) => ReactNode) | Content or render function with onClose callback |
| classPrefix | string ('navbar-content') |
The prefix of the CSS class |
| hideFrom | Breakpoints | Hide content at specified breakpoint |
| showFrom | Breakpoints | Show content at specified breakpoint |
<Navbar.Toggle>
| Property name | Type (Default) |
Description |
|---|---|---|
| as | ElementType ('button') |
Custom element type |
| classPrefix | string ('burger') |
The prefix of the CSS class |
| color | Color | CSSProperties['color'] | The color of the burger lines |
| lineThickness | number | The thickness of the burger lines |
| onToggle | (open: boolean) => void | Callback function that is called when the toggle is clicked |
| open | boolean | Whether the burger is in open (X) state |
<Navbar.Drawer>
Extends Drawer
Breakpoints
type Breakpoints = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
Color
type Color = 'red' | 'orange' | 'yellow' | 'green' | 'cyan' | 'blue' | 'violet';