FLEXBOX GENERATOR

Back to Examples

Navigation Layouts

Various navigation patterns using flexbox. Includes responsive navbar, mega menu, sidebar navigation, and mobile menu examples. Shows how flexbox can create modern navigation layouts that adapt to different screen sizes.

PREVIEW

Logo
Dashboard Team Projects Calendar

Main content area

Logo

CODE

/* Horizontal Navbar */
    .navbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .nav-links {
      display: none;
    }

    @media (min-width: 768px) {
      .nav-links {
        display: flex;
        align-items: center;
        gap: 1.5rem;
      }
    }

    /* Sidebar Navigation */
    .sidebar {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }

    .sidebar-link {
      display: flex;
      align-items: center;
      gap: 0.75rem;
    }

    /* Mega Menu */
    .mega-menu {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 2rem;
    }

    /* Mobile Menu */
    .mobile-menu {
      display: flex;
      flex-direction: column;
    }

    @media (min-width: 768px) {
      .mobile-menu {
        display: none;
      }
    }