Navigation menus in emails can help subscribers quickly access different sections of your content or website. With the Email Love Figma Plugin, you can add a navigation bar that automatically converts to a mobile-friendly hamburger menu on iPhone devices.
What You'll Create
- Desktop view: A horizontal navigation bar with multiple links
- Mobile view: An interactive dropdown hamburger menu (automatic on iPhone)
Step-by-Step Instructions
1. Create Your Email Frame
Start by creating a frame for your email template in Figma.
2. Add a Navigation Component
- Go to the Build Your Own section in the plugin
- Click to add an Empty Single Column Container
- Click on the column to reveal available components
- Scroll down and select the Navigation option
This will add a navigation bar with default link options.
3. Customize Your Navigation Links
Update the text:
- Select the text you want to change
- Type your new link label
- Repeat for each navigation item
Add URLs to your links:
- Select the text
- Go to the Actions tab
- Choose Create Link
- Enter your destination URL
4. Style Your Navigation
Change fonts:
- Select the navigation frame
- Update the font in the typography settings
Remove underlines from links:
- Select the text
- Go to the Typography section
- Open Type Settings
- Set Text Decoration to None
Add or remove navigation items:
- You can copy existing links and add more items
- Aim for 4-5 links maximum for best display
5. Preview Your Navigation
Use the preview function to see how your navigation will render:
- Desktop view: Links display horizontally in light and dark modes
- iPhone view: Navigation automatically converts to an interactive hamburger menu
No additional configuration needed—the mobile transformation happens natively.
Technical Details
The plugin uses MJML's native MJ-NAVBAR component, which provides built-in responsive behavior for mobile devices. The navigation automatically adapts based on screen size without requiring custom code.
Quick Start Option
If you want to use a pre-built navigation menu:
- Look for the out-of-the-box navigation options in the Header section of the plugin
- Select a pre-configured navigation style
- Customize the links and styling to match your brand
Best Practices
- Keep it simple: 4-5 navigation items work best
- Use clear labels: Make link purposes obvious
- Test on mobile: Always preview to ensure the mobile experience works smoothly
- Match your brand: Style the navigation to align with your overall email design
Powered by