Layout
      Back to home
      1. Knowledge Base
      2. Content Items
      3. Layout

      Sequential Menu

      Create a sequential menu for your header using the Sequential Menu and Sequential Category content items

      Sequential menus on mobile devices present options to customers one step at a time. This menu style promotes simplicity and enhanced focus, intuitively guiding your customers through the options in your navigation.

      This article walks through how to build sequential menus in Nyla using the Sequential Menu and Sequential Category content items.  

      Blocks

      When building a sequential menu, we suggest to start with the Nyla block as a jumping off point. 

      The following block acts as a starting point for you to build your own sequential menu: 

      • Mobile Tray: Sequential Menu

      You should add this block inside of the mobile tray. See this article for more details on best practices when building your header.

      Sequential menu: content items

      There are two content items that you should use in order to build a sequential menu: 

      • Sequential menu: this is the top level container for your menu and enables you to add sequential categories within it.
      • Sequential category: sets the title for each category in the sequential menu, and has a content block enabling you to nest the items that users can select within the category.
        • You can add a title and icon to each sequential category, and nest the links/items contained in the menu within the category. 
        • When users click on the category title, they are taken to the contents that you have nested within the category.
        • Sequential category content items take up the full width of the sequential menu so that the title is easily clickable.
        • Add the title for your category in the title fieldset within the design tab. The icon fieldset enables you to add an icon for your category title and choose the placement.
        • This content item can only be added within a sequential menu.
        • You cannot nest sequential categories within each other, however you can nest sequential menus. So in order to have multiple levels within your sequential menu, you would take this approach (e.g Sequential menu > Sequential menu > Sequential Category > links).

      Sequential menu: Link action

      The link action SEQUENTIAL_BACK takes the user back up one level on your sequential menu.