Nav

The Nav component provides a flexible navigation system for grouping links and actions. It supports standard navigation layouts, tab and pill styles, filled navigation items, justified widths, and Bootstrap-compatible utility props.

Import

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

Note

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

Basic usage

Tabs

Use view="tabs" to create tab-style navigation.

Pills

Use view="pills" to create pill-style navigation.

Fill

Use fill to expand navigation items to occupy available space.

Justified

Use justified to make all navigation items equal width.

Disabled Link

Use disabled to disable navigation items.

Custom navigation target

Use the to prop to specify the link destination.

Utility props

All utility props provided by Prime are supported.

API

Nav

Prop	Type	Default	Description
children	ReactNode	—	Navigation content.
as	"nav" | "ul"	"ul"	HTML element used for rendering.
view	"tabs" | "pills"	null	Navigation appearance style.
fill	boolean	false	Expands items to fill available width.
justified	boolean	false	Makes items equal width.
className	string | object | array	null	Additional CSS classes.
style	object	null	Inline styles.

Nav.Item

Prop	Type	Default	Description
children	ReactNode	—	Navigation link content.
className	string | object | array	null	Additional CSS classes.
style	object	null	Inline styles.

Nav.Link

Prop	Type	Default	Description
children	ReactNode	—	Link content.
to	string	"#"	Navigation target URL.
active	boolean	false	Marks link as active.
disabled	boolean	false	Disables interaction.
className	string | object	null	Additional CSS classes.
style	object	null	Inline styles.