Free visual CSS tool

CSS Sidebar Navigation Generator

Design a collapsible app sidebar that animates between a full label view and an icon-only rail. Edit the nav items, colors and position, then copy HTML, CSS and JS.

    Page content area
    Ready-to-use HTML + CSS + JS

    An app shell you can drop in today

    A working collapse toggle, correct icon-rail collapsing, and clean exportable code.

    Real collapse animation

    Click Collapse in the preview to see a genuine CSS width transition, not a mockup.

    Editable nav items

    Type icon and label pairs, one per line, and pick which item is active.

    Left or right

    Mirror the whole layout to place the sidebar on either edge.

    How to build your sidebar

    1. Set widths and colorsChoose expanded and collapsed widths, background and accent color.
    2. Edit nav itemsList icon and label pairs, and choose which item is active.
    3. Test and copyClick Collapse in the preview to confirm the animation, then copy the code.

    About collapsible sidebar navigation

    A collapsible sidebar is one of the most common patterns in dashboards and admin tools: a full-width panel with icons and labels that can shrink to a narrow icon-only rail, giving users more room for content without losing quick access to navigation. The mechanic behind it is simpler than it looks — a CSS transition on the sidebar's width, combined with a class toggled by a small JavaScript click handler, and labels that fade or truncate as the container narrows. This generator produces exactly that pattern as plain, dependency-free HTML, CSS and JS, so it can sit inside any app shell, whether you're using a framework or plain server-rendered pages, without pulling in a component library just for navigation.

    Width transition

    A single CSS transition on width (or max-width) animates the collapse smoothly across modern browsers.

    Icon-rail mode

    At the collapsed width, labels are hidden via overflow while icons stay centered, keeping navigation usable in less space.

    Active item styling

    An accent-colored background on the active link gives users a persistent sense of where they are in the app.

    Left vs. right position

    Some products, especially RTL-friendly ones, place primary navigation on the right; this generator supports both.

    Sidebar navigation generator FAQ

    How do I add or edit navigation items?

    Type one item per line in the nav items textarea using the format "icon | label", for example "šŸ  | Home". Each line becomes one sidebar link.

    Does the collapse toggle actually work?

    Yes. Clicking Collapse in the live preview toggles a real CSS class that animates the sidebar width with a CSS transition, and labels fade out to leave an icon-only rail.

    Can the sidebar sit on the right side instead?

    Yes. Use the position control to switch the sidebar between the left and right edge of the layout.

    What does the exported code include?

    A combined block with the sidebar HTML markup, the CSS including the collapse transition, and the small vanilla JavaScript toggle script, ready to paste into your project.

    Try other navigation tools

    Keep building navigation and layout components with these free tools.

    MNUCSS Mega Menu BuilderMulti-column mega menu navigation panel. ACCCSS Accordion GeneratorCollapsible FAQ accordion. HROHero Section BuilderDesign responsive landing page heroes.