Icon Sidebar Menu

What it does

A sidebar menu is a slim strip of icons pinned to the edge of the screen, one per section of your site. It stays put while you scroll.

This site uses it on desktop. Grab the prompt, the ready-to-paste text under the demo, and your AI rebuilds it for your site.

• Top to bottom: your logo, an icon per section, and sign up and log in at the very bottom (only if you want it).
• The section you're on gets an active state, the look that tells visitors where they are, with a colored icon, or if it's the background that is colored.

How it works

1. 1Start with icons only, or a small label under each.
2. 2Choose the side, left, right, or bottom.
3. 3Pick the active look, colored icon or pill.
4. 4Decide if one entry gets a "Free" tag.
5. 5Tick what sits in the bottom block. We added the options to put sign up and log in, a live counter, and an avatar for logged-in visitors. But that's because that's what we use, you can remove it and use something else if you'd like.
6. 6Copy the prompt with the button under the demo.
7. 7Paste it into Claude or Copilot, whatever you use.
8. 8Answer its questions. It will ask you which sections you want to add, the active entry per page, whether your site has accounts, and what to do on phones.
9. 9Don't forget to test. It's always important to verify that everything works as intended after you add a design.

What you can customize

• Labels: icons only, or a small label under each.
• Side: left, right, or flat along the bottom.
• Active: whether you want it to be a colored icon, or a filled pill.
• Badge: none, or a pill on the entry you name.
• Bottom block: any mix of sign up and log in buttons, a live member counter and an account avatar. If your site has no account system, this block is left out, whatever you ticked here.

This menu is desktop only. But on phones it pairs with the app-style bottom navigation. That's again what we're using on this website. The rest of our website menu designs sit on the Menus shelf.