Framer component · $10
Curtain Menu
A full screen menu for phone sites. Press Menu and a curtain covers the screen, then the links come in one by one in large type. Put it in your header and set it up in Framer’s right panel.
H SHIFT WORKS
Press Menu. Close, Esc or a link closes it. With the keyboard: Tab to Menu, then Enter.
Set it up your way
Where the curtain comes from, where the links sit, the button and the colors. Try these four.
H SHIFT WORKS
Circle from the button
A circle grows from the menu button until it covers the screen, and shrinks back into it on close.
H SHIFT WORKS
From the left, icon only
The curtain slides in from the side. The button is two lines that turn into a cross.
H SHIFT WORKS
Fade, centered
A plain fade, with the links in the middle of the screen and no numbers.
H SHIFT WORKS
Your colors
From the bottom, in your brand color. Pick the curtain, text and muted colors.
Details
Design it on the canvas
Turn on Show open to see the open menu on the canvas, then set the fonts, colors and spacing there.
Keyboard and screen readers
Focus moves into the menu and stays there. Esc closes it, and focus goes back to the button.
The page stays still
The page behind does not scroll while the menu is open, and it does not jump when the scrollbar hides.
Shows where you are
The link to the page you are on is underlined.
Six ways in
From the top, bottom, left or right, a circle that grows from the button, or a fade. Visitors who turn off motion get a plain fade.
Small links at the bottom
Add your email or social links under the main links.
Settings
Show open
Canvas only. Shows the open menu so you can design it.
Links
Label and link for each. Numbers on or off, underline for the current page.
Link font / Gap
The font of the links and the space between them.
Links at / Align
Top, center or bottom of the screen. Left or centered.
Name
The name at the top of the open menu, its link and font. Leave it empty to hide it.
Small links
Email or social links at the bottom, and their font.
Button
Text, icon or both. Open and close text, font, color, icon size and line.
Comes from / Duration
Top, bottom, left, right, circle or fade, and how long it takes.
Colors
Curtain, text, and a muted color for numbers and small links.
Padding / Z index
Match your header so Close sits where Menu was. Raise Z index if something covers the menu.
How to use it
01
Buy it, then open the component link from your receipt.
02
Paste it on any page of your Framer project (⌘V).
03
Change the settings in the right panel. Preview to see it move.
From the same maker
Framer templates by H SHIFT WORKS
CIRCLED
Booking site for portrait and wedding photographers.
View template →
AGENDA
Conference site with schedule, speakers and venue.
View template →
OFFSET
Studio site for an independent digital agency.
View template →
TRUSS
Site for renovation and design-build companies.
View template →
GAZE
Dark, photo-led portfolio for one visual artist.
View template →
© 2026 H SHIFT WORKS. Framer templates, plugins and components.
framer.com/@hshiftworks
X: @hshiftworks