Home / Snippets / Color & Theming /

Dark mode navigation

Contrast with the pill nav snippet: this is a full bar — brand, text links, and a primary CTA for “sign in” or “deploy”.

Nebula

Widely Supported

colorno-js

Quick implementation

.dmnav-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid oklch(0.38 0.04 265 / 0.55);
}
.dmnav-cta {
  background: linear-gradient(180deg, oklch(0.52 0.14 265), oklch(0.42 0.14 265));
}

Prompt this to your LLM

Responsive collapse and mobile menu.

You are building a dark-theme top navigation for a SaaS app.

Goal: Brand link, 3–4 text links, one primary CTA button.

Technical constraints:
- Use header + nav with aria-label; list markup for links.
- Bar has bottom border hairline; CTA uses gradient consistent with dark-mode buttons.
- On narrow widths, wrapping is acceptable — no hamburger in this snippet.

Return HTML + CSS.

Why this matters in 2026

Global navigation anchors every route; dark surfaces need clear separation from page chrome without a heavy white strip.

The logic

space-between pushes CTA to the end on wide rows; on wrap, links stay grouped.

Accessibility & performance

Native button for CTA; links are real anchors. Add skip-link in the real app shell.