SimpleCSS
  • ☀️Light
  • 🌙Dark
  • 💻System
Download

🧭 Navbar

🧩 How to use

Add data-js="collapse" to the toggle button and set data-target to the navbar body ID. The script opens or closes the navbar body, toggles the .show class, and updates aria-expanded automatically.

📏 Breakpoints

These classes control the breakpoint at which the navbar switches between desktop layout and collapsed layout. Each one sets its own responsive behavior.
The default .navbar uses the md breakpoint.

The current configuration sets the typographic baseline to 1rem = 10px, using html { font-size: 62.5%; }.

.navbar

Collapses at 76.8rem (768px)

.navbar-xs

Collapses at 42.5rem (425px)

.navbar-sm

Collapses at 57.6rem (576px)

.navbar-md

Collapses at 76.8rem (768px)

.navbar-lg

Collapses at 99.2rem (992px)

.navbar-xl

Collapses at 120rem (1200px)

.navbar-xxl

Collapses at 140rem (1400px)

📐 Alignment

Alignment is controlled via classes on .navbar-body. On desktop, you can align the content to the left, center, or right.

.left
.start

Aligns the navbar content to the left.

.center

Centers the navbar content.

.right
.end

Aligns the navbar content to the right.

When the navbar is collapsed (.navbar-body.show on smaller screens), you can use the bp-* variants to change the alignment only in collapsed mode.

.bp-left
.bp-start

Aligns items to the left when collapsed.

.bp-center

Centers items when collapsed.

.bp-right
.bp-end

Aligns items to the right when collapsed.

⚙️ Variables CSS

Variable Description
--navbar-bg-color Background color of the navbar.
--navbar-body-gap Gap between elements inside the navbar body.
--navbar-border-color Border color of the navbar.
--navbar-border-radius Corner radius of the navbar.
--navbar-border-style Border style of the navbar.
--navbar-border-width Thickness of the navbar border.
--navbar-nav-gap Gap between navigation items.
--navbar-nav-list-item-border-radius Corner radius of the navigation items.
--navbar-nav-margin Margin applied around the navigation container.
--navbar-padding Padding applied to the navbar.