Nav

Clay Nav provides a clear and semantic navigation for your site

installyarn add @clayui/nav
versionNPM Version
useimport Nav from '@clayui/nav';

Table of Contents

Nav

This is a component. Navigations share general markup and styles from the .nav class, therefore the components Nav Tabs, Nav Underline, Menubar, Navbar, Application Bar, Management Bar, and Navigation Bar all use .nav as its base.

.nav-link and .active.nav-link in the Nav doesn’t have any special styling to make it easier to overwrite via color modifiers used in Clay’s components above. If you would like to use a custom color scheme for the Nav, create a custom color modifier class and use the clay-nav-variant($map) mixin.

Snippet

Nav Divider

Add the class nav-divider on nav-item to show a border at the start. The class nav-divider-end should be used on nav-item to show a border at the end.

Nav Stacked

Use .nav-stacked class alongside with .nav.

Snippet

Nav Nested

Add class nav-nested to the outermost nav to use padding to indent each nested nav.

Also collapsible when used with Bootstrap Collapse Plugin.

Snippet

Nav Nested Margins

The same of Nav Nested but instead of use nav-nested class, use nav-nested-margins.

Nav Unstyled

Add nav-unstyled to your nav to remove spacing around nav-link and nav-btn.

Snippet

Helpers

Dropdown toggle with anchor: dropdown-toggle nav-link.

Dropdown toggle with button: btn btn-unstyled dropdown-toggle nav-link.

An anchor in Nav Item styled like btn: btn btn-primary nav-btn nav-btn-monospaced.

A button in Nav Item styled like nav-link: btn btn-unstyled nav-link.

A button in Nav Item: btn btn-primary nav-btn.

A monospaced anchor in Nav Item: nav-link nav-link-monospaced.

A monospaced button in Nav Item: btn btn-primary nav-btn nav-btn-monospaced.

Snippet

Edit this page on GitHub

Contributors

Matuzalém Teles

Last edited May 12, 2025 at 7:56:02 PM

Table of Contents