Seventh > Navigation drawer

The Navigation Drawer section is a sidebar that opens from the side (e.g. when the user taps the hamburger icon in the header). It provides a separate navigation experience for mobile and can show menus and promo cards.

What it does

This section displays:

A slide‑out drawer (sidebar) for navigation
Menu blocks and optional static promo blocks
Footer area with account, country/language selectors, and social links

Section settings explained

Content

Show account — Link to account/login in the drawer footer (when customer accounts are enabled).
Show country selector — Currency/region selector in the footer.
Show locale selector — Language selector in the footer.
Show social links — Social icons in the footer.

The section has no layout or design settings beyond these toggles. The drawer is opened by the header’s hamburger (when the main row uses Drawer or Both menu style).

Navigation blocks

A navigation group with an optional heading and a link list. Rendered as a list of links in the drawer.

Heading

Optional title above the menu.

Menu

Link list to display (e.g. main menu, footer, or a custom navigation).
Links with submenus will display an arrow at the right and slide to their respective children when clicked.

Note: Links that have submenus will make the url inaccessible. Clicking on those will open the submenu, instead of following the link.

Heading typography

Gives you size, weight and case options for the heading.

Menu typography

Gives you size, weight and case options for all the links (affects submenus as well).

A block that shows one or more cards (e.g. promo, product, collection) in the drawer. Multiple cards can be shown in a slider.

Heading

Optional title above the cards.

Heading typography

From typography_basic_set_headings.json with prefix heading_ .

Layout

Cards alignment — Top, center, bottom, or stretch (when cards have different heights).

Inner blocks

You can choose from a range of cards to insert in any place inside the promo slider.

When there is more than one card, the block uses a horizontal slider.

Note: Promo blocks do not appear in submenus. They are only shown in the initial state of the navigation drawer.

Tips for success

Keep menu labels short for small screens.
Add multiple Menu blocks for different groups (e.g. main nav, secondary nav, help).
Use typography options to differentiate the importance of certain menus.
Use one or two promo cards so the drawer doesn’t feel crowded.
Align drawer footer options (account, locale, social) with the rest of the theme.

Troubleshooting

If the images inside the promo cards look blurred inside the editor, save the instance or check it outside the theme editor, as this may cause issues when editing the theme.