Design Studio Navbar · MacOS Menu Bar Style Navigation
Design Studio Nav Bar brings MacOS-level polish to your portfolio or agency site. The navigation features three structured dropdowns, each multiple items and an adjustable amount of flyout sub-menus that open laterally, exactly like Apple's system menus.
The Liquid Glass aesthetic uses a translucent backdrop blur surface with subtle borders and carefully weighted typography. Every item has an icon and a label. Hover states, open states, and flyout transitions are all handled out of the box.
3 dropdown menus (Work, Services, Studio)
Lateral flyout sub-menus per dropdown item (up to 2 levels deep)
Frosted glass surface with backdrop blur
Active, hover, and open states for all interactive elements
Logo slot + CTA button
Section labels and dividers within dropdowns
Labels, descriptions, icons and link targets are all easily editable per item. The component can be used as is or as a starting point for a more complex navigation system that fits your needs.
1.0 Initial release
Design Studio Nav Bar brings MacOS-level polish to your portfolio or agency site. The navigation features three structured dropdowns, each multiple items and an adjustable amount of flyout sub-menus that open laterally, exactly like Apple's system menus.
The Liquid Glass aesthetic uses a translucent backdrop blur surface with subtle borders and carefully weighted typography. Every item has an icon and a label. Hover states, open states, and flyout transitions are all handled out of the box.
3 dropdown menus (Work, Services, Studio)
Lateral flyout sub-menus per dropdown item (up to 2 levels deep)
Frosted glass surface with backdrop blur
Active, hover, and open states for all interactive elements
Logo slot + CTA button
Section labels and dividers within dropdowns
Labels, descriptions, icons and link targets are all easily editable per item. The component can be used as is or as a starting point for a more complex navigation system that fits your needs.
1.0 Initial release
