Preview:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vertical Navigation Bar</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="sidebar">
        <a href="#home" class="active">Home</a>
        <a href="#news">News</a>
        <a href="#contact">Contact</a>
        <a href="#about">About</a>
    </div>

    <div class="content">
        <h1>Welcome to My Website</h1>
        <p>This is a simple vertical navigation bar example.</p>
    </div>
</body>
</html>

* {
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
}

.sidebar {
    height: 100%; /* Full-height */
    width: 200px; /* Set the width of the sidebar */
    position: fixed; /* Fixed Sidebar (stay in place) */
    background-color: #333; /* Sidebar color */
}

.sidebar a {
    padding: 15px; /* Padding */
    text-decoration: none; /* No underline */
    font-size: 17px; /* Font size */
    color: #f2f2f2; /* Text color */
    display: block; /* Make links appear below each other */
}

.sidebar a:hover {
    background-color: #ddd; /* Add a hover effect */
    color: black; /* Text color on hover */
}

.sidebar a.active {
    background-color: #04AA6D; /* Active link color */
    color: white; /* Active link text color */
}

.content {
    margin-left: 220px; /* Margin to the left of the sidebar */
    padding: 20px; /* Padding for content */
}
downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter