--- title: Get Started with your Navigation description: This article will show you how to set up your navigation menu and footer, including how to enable the megamenu and rich submenu. --- [Skip to content](https://help.boostertheme.com/knowledge/get-started-with-your-navigation#main-content) ![logo_white_booster-Sep-13-2022-06-54-02-62-PM.png\]](https://help.boostertheme.com/hs-fs/hubfs/logo_white_booster-Sep-13-2022-06-54-02-62-PM.png?height=36&name=logo_white_booster-Sep-13-2022-06-54-02-62-PM.png) - [Home - Help Center](https://help.boostertheme.com/knowledge) Open main navigation Close main navigation - [Home - Help Center](https://help.boostertheme.com/knowledge) - [Go to boostertheme.com](https://boostertheme.com/) [Go to boostertheme.com](https://boostertheme.com/?hsLang=en) Hello. How can we help you? - There are no suggestions because the search field is empty. 1. [Home - Help Center](https://help.boostertheme.com/knowledge?hsLang=en) 2. [Get started](https://help.boostertheme.com/knowledge/get-started?hsLang=en) 3. [Learning the basics](https://help.boostertheme.com/knowledge/get-started?hsLang=en#learning-the-basics) # Get Started with your Navigation ## This article will show you how to set up your navigation menu and footer, including how to enable the megamenu and rich submenu. [![Navigation Header and Footer](https://help.boostertheme.com/hs-fs/hubfs/Navigation%20Header%20and%20Footer.jpg?width=688&height=430&name=Navigation%20Header%20and%20Footer.jpg)](https://help.boostertheme.com/hubfs/Navigation%20Header%20and%20Footer.jpg?hsLang=en)   The header and footer are essential components of any online store, as they provide a consistent navigation experience for customers across all pages. The header includes the store's navigation links and search bar, while the footer typically includes links to other relevant pages. It is important to ensure that these sections are well-designed and informative, as they can play a significant role in ensuring your customers can easily find what they are looking for. #### In this article: 1. [Header](https://help.boostertheme.com/knowledge/get-started-with-your-navigation#header) 2. [Header Settings](https://help.boostertheme.com/knowledge/get-started-with-your-navigation#header-settings) 3. [Megamenu and Rich submenu](https://help.boostertheme.com/knowledge/get-started-with-your-navigation#megamenu) 4. [Setting Up the Megamenu](https://help.boostertheme.com/knowledge/get-started-with-your-navigation#setting-up) 5. [Setting Up the Rich Submenu](https://help.boostertheme.com/knowledge/get-started-with-your-navigation#setting-up-rich-submenu) 6. [Top Bar and Bottom Bar](https://help.boostertheme.com/knowledge/get-started-with-your-navigation#top-bottom-bar) 7. [Footer and Sub-Footer](https://help.boostertheme.com/knowledge/get-started-with-your-navigation#footer-subfooter) 8. [Other Links](https://help.boostertheme.com/knowledge/get-started-with-your-navigation#other-links) --- #### Header The header is the primary navigational component of a website. It typically contains a logo(1), a navigation menu(2), and general utilities(3) for users. [![Header Menu](https://help.boostertheme.com/hs-fs/hubfs/Header%20Menu.jpg?width=688&height=76&name=Header%20Menu.jpg)](https://help.boostertheme.com/hubfs/Header%20Menu.jpg?hsLang=en) #### Header Settings The header settings offer a lot of layout options. To learn more, kindly refer to [this article](https://help.boostertheme.com/knowledge/header-settings?hsLang=en). #### [![Header Default Settings](https://help.boostertheme.com/hs-fs/hubfs/Header%20Default%20Settings.jpg?width=688&height=801&name=Header%20Default%20Settings.jpg)](https://help.boostertheme.com/hubfs/Header%20Default%20Settings.jpg?hsLang=en) #### Megamenu and Rich submenu The header menu is a critical component of any online store, as it allows users to navigate throughout the site. With the Booster Theme, you can customize the header menu. You are not limited to a basic menu; you can also create a mega menu that displays images(1) and rich submenus that contain icons, titles, and descriptions(2). **1. Megamenu** [![Mega menu](https://help.boostertheme.com/hs-fs/hubfs/Mega%20menu.jpg?width=688&height=335&name=Mega%20menu.jpg)](https://help.boostertheme.com/hubfs/Mega%20menu.jpg?hsLang=en) **2. Rich submenu** [![Rich submenu](https://help.boostertheme.com/hs-fs/hubfs/Rich%20submenu.jpg?width=592&height=363&name=Rich%20submenu.jpg)](https://help.boostertheme.com/hubfs/Rich%20submenu.jpg?hsLang=en) ### Setting up the Megamenu #### **Step 1. Create a Menu** Go to your **Online Store** → **Navigation** → **Add menu**. [![Shopify Navigation Page](https://help.boostertheme.com/hs-fs/hubfs/Shopify%20Navigation%20Page.jpg?width=688&height=412&name=Shopify%20Navigation%20Page.jpg)](https://help.boostertheme.com/hubfs/Shopify%20Navigation%20Page.jpg?hsLang=en) #### Step 2. Add Sub-items In order to trigger the mega-menu layout, you'll need to add a submenu item that is **a collection or a product with an image. ** [![Menu sub-collection](https://help.boostertheme.com/hs-fs/hubfs/Menu%20sub-collection.jpg?width=688&height=405&name=Menu%20sub-collection.jpg)](https://help.boostertheme.com/hubfs/Menu%20sub-collection.jpg?hsLang=en) #### Step 2. Enable the Megamenu Option Go into the **Header settings** and check the "**Enable megamenu"** option. [![Enable Megamenu setting](https://help.boostertheme.com/hs-fs/hubfs/Enable%20Megamenu%20setting.jpg?width=328&height=297&name=Enable%20Megamenu%20setting.jpg)](https://help.boostertheme.com/hubfs/Enable%20Megamenu%20Option.jpg?hsLang=en) ### Setting Up the Rich Submenu In the ABOUT item, you can see that it's different, this is a way do to it for the rich submenu features. The complete item is set up like this: > *desc: Learn more about our core values and the team behind Madore | icon: users-alt | text: Our commitment* [![Rich Submenu Nav Item](https://help.boostertheme.com/hs-fs/hubfs/Rich%20Submenu%20Nav%20Item.jpg?width=688&height=403&name=Rich%20Submenu%20Nav%20Item.jpg)](https://help.boostertheme.com/hubfs/Rich%20Submenu%20Nav%20Item.jpg?hsLang=en)   Here is the logic to follow to set up the rich submenu: - "**icon:**" You need to use the icon names from [this library](https://iconscout.com/unicons/explore/line) (in this example: *users-alt*) [![IconScout Name](https://help.boostertheme.com/hs-fs/hubfs/IconScout%20Name.jpg?width=525&height=241&name=IconScout%20Name.jpg)](https://help.boostertheme.com/hubfs/IconScout%20Name.jpg?hsLang=en) - "**text:**"  This is for the title. - "**desc:**"(optional) This is the description. Note: Make sure to add a "**|**" between each element. #### Step 3. Assign your menu in the Header Settings #### [![Selecting a Menu](https://help.boostertheme.com/hs-fs/hubfs/Selecting%20a%20Menu.jpg?width=552&height=644&name=Selecting%20a%20Menu.jpg)](https://help.boostertheme.com/hubfs/Selecting%20a%20Menu.jpg?hsLang=en)   You know everything now about the menu! You can now use the megamenu and the rich submenu features easily. There is so much more to discover inside Booster Theme!   --- #### Top bar and Bottom Bar The top bar and bottom bar are two additional sections that can be found in the header. The top bar typically displays secondary menus, such as links to social media pages. The bottom bar typically displays additional information, such as free shipping or geo-block. [![Top and Bottom Bar](https://help.boostertheme.com/hs-fs/hubfs/Top%20and%20Bottom%20Bar.jpg?width=688&height=135&name=Top%20and%20Bottom%20Bar.jpg)](https://help.boostertheme.com/hubfs/Top%20and%20Bottom%20Bar.jpg?hsLang=en) #### Footer and Sub-Footer The footer and sub-footer are the bottommost sections of a website. They typically contain contact information, copyright information, and other legal terms. They can also be used to display additional information, such as a blogroll or a newsletter signup form. [![Footer Sub-Footer](https://help.boostertheme.com/hs-fs/hubfs/Footer%20Sub-Footer.jpg?width=688&height=246&name=Footer%20Sub-Footer.jpg)](https://help.boostertheme.com/hubfs/Footer%20Sub-Footer.jpg?hsLang=en) Need more explanation? Here are the articles for you: 1. [Top bar](https://help.boostertheme.com/knowledge/how-to-setup-top-bar-in-booster-theme?hsLang=en) 2. [Bottom bar](https://help.boostertheme.com/knowledge/how-to-setup-bottom-bar-in-booster-theme?hsLang=en) 3. [Footer](https://help.boostertheme.com/knowledge/how-to-setup-footer-in-booster-theme?hsLang=en) 4. [Sub-footer](https://help.boostertheme.com/knowledge/how-to-setup-sub-footer-in-booster-theme?hsLang=en) - [Get started](https://help.boostertheme.com/knowledge/get-started?hsLang=en#main-content) - [Installation Process](https://help.boostertheme.com/knowledge/get-started?hsLang=en#installation-process) - [Learning the basics](https://help.boostertheme.com/knowledge/get-started?hsLang=en#learning-the-basics) - [In-depth Tutorials](https://help.boostertheme.com/knowledge/in-depth-tutorials?hsLang=en#main-content) - [Sections](https://help.boostertheme.com/knowledge/in-depth-tutorials?hsLang=en#sections) - [Theme settings](https://help.boostertheme.com/knowledge/in-depth-tutorials?hsLang=en#theme-settings) - [Product Page](https://help.boostertheme.com/knowledge/in-depth-tutorials?hsLang=en#product-page) - [More tutorials](https://help.boostertheme.com/knowledge/in-depth-tutorials?hsLang=en#more-tutorials) - [More support](https://help.boostertheme.com/knowledge/more-support?hsLang=en#main-content) - [Partners app Ressource center](https://help.boostertheme.com/knowledge/more-support?hsLang=en#partners-app-ressource-center) - [Managing your subscription & theme](https://help.boostertheme.com/knowledge/more-support?hsLang=en#managing-your-subscription-theme) - [Change logs & Policies](https://help.boostertheme.com/knowledge/more-support?hsLang=en#change-logs-policies) - [Announcements and others](https://help.boostertheme.com/knowledge/more-support?hsLang=en#announcements-and-others) [![Chill listening crop-3](https://help.boostertheme.com/hs-fs/hubfs/Booster-black-logo.png?width=178&height=51&name=Booster-black-logo.png "Chill listening crop-3")](https://boostertheme.com/?hsLang=en) Copyright © 2026, Booster Theme - PreviewX Inc.