Menus and mega menu

The header navigation is built from a Shopify menu. The type of panel that opens depends only on the depth of your menu: there's no setting to choose.

Create the menu

Dropdown or mega menu

Item structure	Panel shown
No child items	A plain link.
Child items, no third level	A dropdown menu: a list of links. If every child item (at least two) links to a collection, product or article that has a picture, the list becomes a row of image tiles.
At least one child item has its own child items	A mega menu: one column per child item, with its links underneath.

A top-level item that has child items opens its panel instead of going to a page. Its own page is still reachable through the "View all in …" link at the foot of the panel (at the top of each panel in the menu drawer).

The mega menu image showcase

In a mega menu, Faubourg automatically adds a showcase of two images to the right of the columns. It's built from the first two child items (in menu order) that have an image:

• a link to a collection uses the collection image, or failing that, the main photo of the collection's first product;
• a link to a product uses its main photo;
• a link to an article uses its image.

Other link types (pages, blogs, web addresses) are ignored. If no link has an image, there's no showcase and the columns take the full width. The showcase and menu promotions only appear on desktop (990px and up).

Menu promotion

The Menu promotion block replaces the automatic showcase with editorial content of your choice: an image, a heading, text and a link.

Good to know:

• The promotion only appears under an item that has child items (a dropdown menu or a mega menu).
• Several promotions can target the same item: one takes a single column, two or more are shown across two columns.
• In a dropdown menu, the promotion appears next to the list, with image and text side by side.
• On phones, promotions appear at the bottom of the item's sub-panel, in the menu drawer.
• Without an image, a placeholder illustration is shown, including on your online store.
• The header that ships with the theme already holds a Menu promotion under the first item (Menu item 1), with sample text and no image: until you choose an image or delete the block, a placeholder shows under that item, if it has child items.
• If both a link and its label are filled in, the label becomes an underlined link; otherwise the heading, or failing that the image, carries the link.

The menu drawer

On phones (and on desktop with Desktop navigation > Drawer), the menu opens in a side drawer. You move through the three levels in successive panels, and each panel starts with a "View all in …" link to the item's own page. Once you're inside a panel, the drawer's top bar shows a back arrow before its title, and the title becomes a trail of the items you opened, for example Menu > Shop > Women. The country and language selectors are at the bottom of the drawer. Without JavaScript, the drawer still works, in a simplified form.

Customer account menu

The header's Customer account menu setting chooses the menu offered in the account menu (orders, profile...). By default, it's the customer-account-main-menu menu created by Shopify.