Navigation Structure

Proper navigation structure helps users and search engines understand your site. Learn to create accessible, well-organized navigation.

The Nav Element

The <nav> element:

• Marks navigation sections
• Helps screen readers identify navigation
• Can be used multiple times per page

Navigation Lists

Using lists for navigation is semantic and flexible:

Benefits of list navigation:

• Semantic grouping of links
• Easy to style with CSS
• Screen readers announce "list of 4 items"

Multiple Navigation Areas

When using multiple <nav> elements:

• Add aria-label to distinguish them
• Common areas: header, sidebar, footer

Dropdown Navigation

Nested lists create dropdown menus. CSS and JavaScript handle the show/hide behavior.

Breadcrumb Navigation

Breadcrumb best practices:

• Use ordered list (<ol>) for sequence
• Add aria-label="Breadcrumb"
• Mark current page with aria-current="page"

Skip Links

Skip links:

• Allow keyboard users to skip navigation
• Hidden until focused
• Essential for accessibility

Exercise: Build Site Navigation

Create a complete navigation structure with header and footer nav:

Well-structured navigation improves usability, accessibility, and SEO for your website!