Navbar
An enterprise-grade navigation bar component based on BrConfigProvider. Supports responsive collapsing, sticky effects, and mobile adaptation. Provides flexible sub-components for complex navigation structures.
Basic Usage
The basic navbar includes a brand logo on the left, navigation items in the middle, and action buttons on the right.
With Dropdown Menu
Combine with the BrDropdown component to implement multi-level dropdown navigation items.
Enterprise
- Dashboard
- Solutions
- Docs (Maintenance)
Example
Mobile Responsive
Automatically hides navigation content on small screens, displaying a hamburger menu that expands into a mobile-specific menu upon clicking.
Theming
The style of BrNavbar is deeply integrated with TailwindCSS and BrConfigProvider. You can modify colors globally or override them locally using Tailwind classes.
Global Theme
- Home
- About
Dark Nav
- Home
- Projects
Example
API
BrNavbar Props
| Name | Type | Default | Description |
|---|---|---|---|
| position | 'static' | 'sticky' | 'fixed' | 'sticky' | Positioning of the navbar |
| isBordered | boolean | false | Whether to display a bottom border |
| shouldHideOnScroll | boolean | false | Whether to hide automatically when scrolling down |
| isTransparent | boolean | false | Whether it is transparent initially and shows background after scrolling |
| scrollTrigger | number | 20 | Scroll distance (px) to trigger the scroll style |
| class | string | - | Custom class names |
BrNavbarBrand Props
| Name | Type | Default | Description |
|---|---|---|---|
| class | string | - | Custom class names |
BrNavbarContent Props
| Name | Type | Default | Description |
|---|---|---|---|
| justify | 'start' | 'center' | 'end' | 'start' | Alignment of the content |
| class | string | - | Custom class names |
BrNavbarItem Props
| Name | Type | Default | Description |
|---|---|---|---|
| isActive | boolean | false | Whether it is in an active state |
| isDisabled | boolean | false | Whether it is disabled |
| href | string | - | Link URL (renders as an a tag if present) |
| class | string | - | Custom class names |
BrNavbarTrigger Props
| Name | Type | Default | Description |
|---|---|---|---|
| ariaLabel | string | 'Toggle navigation menu' | Accessibility label |