Navigation bars are essential components of websites that help users move between different pages. CSS allows you to create both horizontal and vertical navigation bars with styled links.
/* Horizontal Navigation */
.nav {
display: flex;
background-color: #19376d;
}
.nav a {
display: block;
padding: 15px 20px;
color: white;
text-decoration: none;
font-weight: 600;
}
.nav a:hover {
background-color: #0d2b5a;
}
.nav {
display: flex;
background-color: #19376d;
}
.nav a {
display: block;
padding: 15px 20px;
color: white;
text-decoration: none;
font-weight: 600;
}
.nav a:hover {
background-color: #0d2b5a;
}
web
Navigation Examples
tips_and_updates
Navigation Best Practices
touch_app
Use clear visual indicators for active links
format_size
Provide adequate padding for touch targets
animation
Add subtle transitions for better user experience
center_focus_strong
Ensure keyboard focus states are visible