Easily add and modify your site menu with blocks.
This article walks you through building a header in Nyla. It splits into three
- Announcement bars: Enabling you to add messaging to your navigation
- Nav bars: Choosing the main layout for your navigation
- Menu level blocks: Choosing each dropdown type and layout for your menu items
- Mobile menu styles: Setting how your menu looks on mobile
Blocks and Templates
Learn about adding announcement bar blocks:
Announcement Bars:
- Announcement bar: Simple
- Adds a simple announcement bar to your header
- Announcement bar: Slider
- Adds a rotating announcement bar to your header
- Announcement bar: Marquee
- Adds a rotating announcement bar to your header
- Announcement bar: Dismisable
- Adds a simple announcement bar that can be dismissed/removed to your header
- Announcement bar: Icons
- Adds an announcement bar containing 3 highlighted copy with icons
- Announcement bar: Currency & Links
- Adds an announcement bar with built-in currency selector on desktop
Nav Bars:
Follow along in the video:
- Nav Bar: Center Logo
- Adds a nav bar layout with the logo in the center
- Nav Bar: Left Logo
- Adds a nav bar layout with the logo on the left
Menu Link Level Blocks:
- Menu item: Megamenu w link lists
- Adds a layout with categories & links for your menu dropdown
- Requirements:
- Must be added inside a Menu content item
- Menu item: Megamenu w photos
- Adds a layout with categories & image banners for your menu dropdown
- Requirements:
- Must be added inside a Menu content item
- Menu item: Simple dropdown
- Adds a simple layout with links for your menu dropdown
- Requirements:
- Must be added inside a Menu content item
- Menu item: Search icon
- Adds a layout for the search icon with the link action already built-in (to be used with the Algolia app)
- Requirements:
- Must be added inside a Menu content item
- Search Input
- Adds a layout for the search input with the link action already built-in (to be used with the Algolia app)
- Menu item: Cart icon w count
- Adds a cart icon layout with a built-in cart count
- Requirements:
- Must be added inside a Menu content item
- Menu item: Cart text w count
- Adds a cart text layout with a built-in cart count
- Requirements:
- Must be added inside a Menu content item
- Menu item: Account icon
- Adds an account icon that links users to the login page
- Requirements:
- Must be added inside a Menu content item
Mobile Menu Styles:
- Mobile Tray: Accordion
- Adds a layout for the mobile tray with links inside collapsible accordion panels
- Mobile Tray: List
- Adds a simple layout for the mobile tray with a list of links
- Mobile Tray: Sequential Menu
- Adds a sequential menu layout to your mobile tray
- Currency Switcher Modal
- Adds a modal layout for switching between different currencies on mobile