Creating a Menu with Flexbox

Creating a Menu with Flexbox

Navigation menus are one of the most common uses for Flexbox. Let's build a professional horizontal navigation bar with a logo on the left, links in the center, and action buttons on the right.

The HTML

<nav class="navbar">
    <div class="nav-logo">
        <a href="#">DevBlog</a>
    </div>
    <ul class="nav-links">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
    <div class="nav-actions">
        <a href="#" class="btn btn-outline">Sign In</a>
        <a href="#" class="btn btn-primary">Get Started</a>
    </div>
</nav>

The Navbar Layout (Flex Container)

.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
    height: 70px;
    background: #2c3e50;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}

justify-content: space-between pushes the logo to the left, links to the middle area, and actions to the right.

Logo Styling

.nav-logo a {
    color: #fff;
    font-size: 22px;
    font-weight: 800;
    text-decoration: none;
    letter-spacing: -0.5px;
}

Nav Links (Nested Flex)

.nav-links {
    display: flex;
    list-style: none;
    gap: 8px;
}

.nav-links li a {
    color: #ccc;
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 500;
    transition: color 0.2s ease, background 0.2s ease;
}

.nav-links li a:hover,
.nav-links li a.active {
    color: #fff;
    background: rgba(255,255,255,0.1);
}

The <ul> is itself a flex container — display: flex makes the list items sit in a row.

Action Buttons

.nav-actions {
    display: flex;
    gap: 10px;
}

.btn {
    padding: 8px 20px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.2s ease;
}

.btn-outline {
    color: #fff;
    border: 1px solid rgba(255,255,255,0.3);
    background: transparent;
}

.btn-outline:hover {
    border-color: #fff;
    background: rgba(255,255,255,0.1);
}

.btn-primary {
    background: #3498db;
    color: #fff;
    border: 1px solid #3498db;
}

.btn-primary:hover {
    background: #2980b9;
    transform: translateY(-1px);
}

The Flexbox Layout Pattern

|  Logo  |    ← flex-shrink: 0
|        Nav Links        |    ← centered by space-between
|  Actions  |    ← flex-shrink: 0

justify-content: space-between distributes these three groups.

Alternative: margin-left: auto

Another common pattern — push actions to the right using auto margins:

.navbar {
    display: flex;
    align-items: center;
    gap: 40px;
}

.nav-actions {
    margin-left: auto;  /* Pushes to the far right */
}

margin-left: auto on a flex item absorbs all remaining space on the left, pushing the element to the right edge.

Key Takeaways

• display: flex + justify-content: space-between is the classic navbar layout
• The nav links <ul> is a nested flex container for horizontal links
• align-items: center vertically centers all items in the navbar
• margin-left: auto pushes items to the right edge
• gap handles spacing between links and buttons cleanly