Slide-In Side Menu

What it does

Copy this menu design, adjust the options, and paste the prompt so your own AI builds it straight into your site.

This is the menu that keeps your site's links out of sight until they are needed, then slides them in from the edge of the screen.

It keeps a small screen tidy. You show one button instead of a crowded row of links, and the full list waits behind it.

You will hear this same pattern called by a few names:

• Hamburger menu, after the three-line button that opens it.
• Slide-out menu, because it slides out from the edge.
• Navigation drawer, because it pulls open like a drawer.
• Off-canvas menu, because it waits just off the edge of the screen until it is called in.

How it works

1. 01

   At rest it stays hidden, so the page looks clean and nothing competes with your content.

2. 02

   Tap the trigger button and the panel slides in from the side of the screen.

3. 03

   The page dims behind it, under a see-through dark layer called the backdrop that keeps attention on the menu.

4. 04

   Rows are an icon next to a label, from a sign-in row at the top through your main sections.

5. 05

   A divider splits the lists, with a shorter secondary set sitting below the main one.

6. 06

   The footer holds the extras, an app-download card, social icons, a language switcher, and a support link.

7. 07

   Tap a row to follow its link and close the panel.

8. 08

   Tap the backdrop or press Escape to close it too, and focus returns to the opening button.

What you can customize

• Opens from: Left or Right. The panel and its slide flip to match. Left by default.
• Trigger button: a hamburger icon, a Menu label, a profile avatar, or an edge arrow tab. We put the hamburger icon by default.
• Row badges: counters and tags, or labels only. Counters show a number or a "New" flag. The preview shows the counters by default.
• Where it shows: desktop and mobile, or desktop only. Desktop only keeps your normal nav on phones. Both by default.
• Include blocks: account row, special offer card, app-download card, support link, social icons, language switcher. They are all on by default.

On desktop this pairs nicely with a slim icon rail sitting alongside it, the compact strip handling your main sections while the slide-in panel holds everything else.

If you use a sticky header that stays visible, it keeps your logo, main links and main button at the top of every page, while this side menu holds everything else.