Navbar

The Navbar component provides a responsive navigation header with support for branding, navigation links, collapsible content, and different positioning modes.

Import

import { Navbar } from "@promethey/bsui";

Note

Navbar inherits all utility props supported by the Prime component, including layout, spacing, typography, colors, borders, sizing, positioning, and other Bootstrap utility APIs.

Basic usage

Responsive

Use expand together with Navbar.Toggler and Navbar.Collapse to create responsive navigation.

Brand

Use Navbar.Brand for displaying application names, logos, or brand elements.

Navigation

Navbar.Nav groups navigation items inside the navbar.

Tone

Use the tone prop to change navbar appearance.

Placement

Navbar supports fixed and sticky positioning.

Scrollable navigation

Use Navbar.Nav with scroll to enable scrollable navigation content.

Avatar

Combine Navbar, Dropdown, and Nav.Link to create a user profile menu with an avatar. This pattern is commonly used for account actions such as profile settings, notifications, and sign out.

Dark

Apply the dark tone together with a dark background to create navigation bars suitable for dashboards, admin panels, and applications with dark themes.

Login

All utility props provided by Prime are supported.

API

Navbar

Prop	Type	Default	Description
children	ReactNode	—	Navbar content.
className	string	—	Additional CSS classes.
style	object	—	Inline styles.
tone	"light" | "dark"	—	Navbar color variant.
expand	"sm" | "md" | "lg" | "xl" | "xxl"	—	Responsive collapse breakpoint.
placement	"fixed-top" | "fixed-bottom" | "sticky-top"	—	Navbar positioning mode.

Navbar.Brand

Prop	Type	Default	Description
children	ReactNode	—	Brand content.
to	string	"#"	Navigation target.
as	elementType	"a"	Rendered HTML element.

Navbar.Collapse

Prop	Type	Default	Description
children	ReactNode	—	Collapsible content.
className	string	—	Additional CSS classes.
style	object	—	Inline styles.

Navbar.Nav

Prop	Type	Default	Description
children	ReactNode	—	Navigation content.
scroll	boolean	false	Enables scrollable navigation.
scrollHeight	string	—	Maximum scroll height.

Navbar.Toggler

Prop	Type	Default	Description
children	ReactNode	—	Button content.
onClick	function	—	Click callback.

Navbar.Text

Prop	Type	Default	Description
children	ReactNode	—	Text content.
className	string	—	Additional CSS classes.