Navigation Bar

View in Lexicon

A navigation bar, navbar, is a horizontal bar that provides several access points to different parts of a system.

installyarn add @clayui/navigation-bar
versionNPM Version
useimport NavigationBar from '@clayui/navigation-bar';
You will need to adjust the z-index of .navbar-collapse in the collapsed state if there are multiple .navbar-collapse-absolute’s near each other.
Bootstrap 4 doesn’t support Dropdown Menu’s with Popper.js positioning inside Navbars. They align them manually via CSS classes. See Dropdown Alignment.
Don’t forget to check WAI-ARIAaccessibility pratices for alerts when writting your markup.

Light

Snippet

Secondary

Snippet

Using Buttons

Snippet

Edit this page on GitHub

Contributors

Matuzalém Teles

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