Menu
Use Menu to add navigation, a logo row, anchor links, or a compact header-style block to a landing page.
How It Works In Atomicatβ
The 3.0 Menu drawer manages a menu name and a reorderable item list. Items can be image/logo, normal item, or button. Each item can have a link, title/label, optional icon, active state, and clone/delete/reorder behavior. The drawer also includes a separator control, layout selection, and breakpoint selection so the menu can change behavior on tablet or other responsive widths.
When To Use Itβ
- Create top navigation for multi-section landing pages.
- Add a logo plus anchor links above a hero section.
- Use a button item for the primary navigation CTA.
- Build lightweight navigation inside long pages, funnels, or product explainers.
Configure The Elementβ
- Name the menu for organization, especially when a page has more than one navigation block.
- Choose each item type: image for logo, item for a link, or button for a CTA.
- Set each link and label; use icons only when they improve recognition.
- Mark the active item when the menu represents the current section or page.
- Choose layout and breakpoint after all items are added.
Testing Notesβ
- Click every menu link in preview and on the published URL.
- Check tablet and mobile breakpoint behavior.
- Confirm logo image size and button item alignment in the header container.
Limitations And Tipsβ
- Menu does not automatically build site navigation; you define the items manually.
- Too many links can distract from a single landing page CTA.
- If using anchor links, make sure target sections have stable IDs or supported destinations.
Related Docsβ
FAQβ
Can a menu item be a logo?
Yes. Choose the image item type and select the logo image.
Can one menu item look like a button?
Yes. The item type options include Button.
What does breakpoint control?
It controls when the menu changes responsive behavior, such as tablet handling.