CSS Navigation Bar Examples

Navigation examples combine semantics, consistent spacing and deliberate response to small screens.

Use <nav aria-label="Primary"> with real links for destinations. Flexbox can distribute the site name and link group; flex-wrap lets items move onto additional lines instead of disappearing.

For complex collapsible mobile menus, CSS alone cannot always provide the interaction and state management you need; a native <details> disclosure is a useful limited example.

The nav landmark identifies the region for assistive technology, while display:flex arranges the links in available space.

Display four real links in a row.

HTML

<nav class="primary-nav" aria-label="Primary"><a href="#home">Home</a><a href="#courses">Courses</a><a href="#practice">Practice</a><a href="#about">About</a></nav>

CSS

.primary-nav { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px; background: #eff6ff; border-radius: 9px; } .primary-nav a { color: #1e40af; text-decoration: none; padding: 9px 12px; border-radius: 7px; } .primary-nav a:hover, .primary-nav a:focus-visible { background: #bfdbfe; text-decoration: underline; }

Rendered output

Observe: Links wrap when there is not enough space, and focus remains visible.

Keep the brand distinct from the link set.

HTML

<nav class="primary-nav" aria-label="Primary"><strong class="brand">Atlas</strong><div class="links"><a href="#home">Home</a><a href="#courses">Courses</a><a href="#about">About</a></div></nav>

CSS

.primary-nav { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; background: #0f172a; padding: 12px; border-radius: 10px; } .brand { color: #fff; font-size: 20px; } .links { display: flex; flex-wrap: wrap; gap: 4px; } .links a { color: #e2e8f0; text-decoration: none; border-radius: 6px; padding: 8px 10px; } .links a:hover, .links a:focus-visible { background: #334155; text-decoration: underline; }

Rendered output

Observe: The brand and links share a row when possible and wrap gracefully when not.

The nav landmark identifies the region for assistive technology, while display:flex arranges the links in available space.

Compare the two examples: identify the selector, each changed property, and which visible part of the output proves that the CSS took effect.

• Do not use placeholder links as if they are working application navigation.

• Changing visual link order should not make keyboard order surprising.

Replace About with Contact and add a fourth link; check wrapping at a narrow width.

Before changing the code, predict what will change. Then verify by checking the rendered result.

Combine semantic links with flexible spacing and visible interaction states.

Revisit the rendered examples if the rule still feels abstract. Change one declaration at a time so you can connect cause and effect.