Loading...

CSS Navigation Bars

The Layout lesson sketched page regions. A navigation bar is the link strip that helps people move between those regions and pages. Start with a semantic list of links, lay them in a calm row, then add hover cues — save nested dropdown menus for the next lesson.

A navigation toolkit

📊 Navigation at a glance

Piece Everyday job
nav Landmark for primary/secondary site links
ul / li / a Structured list of destinations
List reset Remove bullets and default indent for bar layouts
Horizontal row Flex or inline-block so links sit side by side
Hover / current Feedback for pointer and “you are here”
Vertical nav Same list stacked — useful in sidebars

Navigation is still links. Keep focus outlines visible, give comfortable padding, and do not hide meaning inside anonymous div piles.

Semantic list inside nav

Wrap the menu in nav and keep destinations as real anchors inside a list. Screen readers and future you will thank the structure.

Reset list for nav

css 
.nav {
list-style: none;
margin: 0;
padding: 0;
}

.nav a {
text-decoration: none;
color: inherit;
}

Horizontal bar with Flex

A simple flex row turns the list into a bar. Gap and padding beat cramped hit targets. (Deeper Flexbox craft comes in later modules — this is enough for a clean navbar.)

Horizontal flex nav

css 
.navbar .nav {
display: flex;
flex-wrap: wrap;
gap: 0.25rem 1rem;
align-items: center;
}

.navbar .nav a {
display: inline-block;
padding: 0.5rem 0.75rem;
}

Hover and current cues

Give feedback on hover and mark the current page with a class. Never remove :focus outlines as a “cleanup.”

Hover and current link

css 
.nav a:hover {
background: #f0f4ff;
border-radius: 0.35rem;
}

.nav a.is-current {
font-weight: 700;
color: #0b5fff;
}

Vertical side navigation

The same list can stack in a sidebar. Keep spacing generous so each link stays easy to hit.

Vertical side nav

css 
.sidenav .nav {
display: flex;
flex-direction: column;
gap: 0.35rem;
}

.sidenav .nav a {
padding: 0.55rem 0.75rem;
}

A calm navigation habit

Use nav + list + readable padding. Prefer flex rows for horizontal bars. Leave mega-menus and dropdowns for the next lesson. Do not confuse a link bar with the full page layout shell.

Named nav roles

css 
.site-nav { /* landmark wrapper */ }
.site-nav__list { /* the ul */ }
.site-nav__link { /* each a */ }
.site-nav__link.is-current { /* active page */ }

Try it yourself

  1. Build nav > ul.nav > li > a and reset list styles.
  2. Lay links in a horizontal flex row with padding and gap.
  3. Add :hover and an .is-current style.
  4. Duplicate the list as a vertical sidenav variant.
  5. Write one sentence: what belongs in the Dropdowns lesson instead of here?

Common mistakes

  • Tiny padding that fails touch and mouse targets
  • Removing focus outlines permanently
  • Div soup instead of nav and lists
  • Building nested dropdown mega-menus in this lesson
  • Treating the navbar as the entire website layout

Summary

  • Navigation bars are structured link lists inside nav
  • Reset bullets, then arrange with flex (or inline-block)
  • Hover and current styles guide without killing focus
  • Vertical nav is the same list stacked
  • Dropdown menus wait for the next lesson

🧠 Test Your Knowledge

Ready to Start

Test Your Knowledge

Challenge yourself with this interactive quiz and see how well you understand the topic

❓
8
Questions
🎯
70%
To Pass
♾️
∞
Time
🔄
∞
Attempts

📝 Instructions

  • Read each question carefully
  • Select the best answer for each question
  • You can retake the quiz as many times as you want
  • Your progress will be shown at the top
Topic 42 of 48
Css Tutorial