Component Documentation
Menubar
The Menubar component is a horizontal menu commonly used in desktop-style interfaces, like MacOS apps. It provides quick, consistent access to navigation or commands.
It consists of a Menubar Wrapper that holds a series of Menubar Triggers. Each Trigger opens a dropdown containing:
- Menubar Items – standard clickable actions or links
- Menubar Separators – for visual grouping
- Menubar Subtriggers – which open nested submenus with their own items
Usage
- Drag the Menubar Wrapper onto the canvas.
- Add Menubar Triggers for each top-level menu item.
- Inside each Trigger, drop Items, Separators, or Subtriggers as needed.
- Use Subtriggers to add another level of hierarchy, and insert more Items inside.
This component is ideal for complex interfaces that need a persistent, organized command structure — just like in desktop applications.
GSAP powered interaction
“This menubar uses Webflow’s new GSAP-powered Interactions. When the .menubar_trigger-component is hovered, it targets the .menubar_content and animates it in. Inside, some components function as subtriggers. When the .menubar_item-wrapper inside a subtrigger is hovered, the .menubar_popover animates in.