# Header Submenus **URL:** https://meta.discourse.org/t/header-submenus/94584 **Category:** Theme component **Tags:** official, header-submenus **Created:** [August 13, 2018, 9:50am UTC](https://meta.discourse.org/t/header-submenus/94584 "2018-08-13T09:50:07Z") **Posts on this page:** 1 **Showing post:** 1
### Author: ![Discourse](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/discourse/32/148734_2.png) [@Discourse](https://meta.discourse.org/u/Discourse) #### Post date: [August 13, 2018, 9:50am UTC](https://meta.discourse.org/t/header-submenus/94584/1 "2018-08-13T09:50:07Z")
| | | | | --- | --- | --- | | :discourse2: | **Summary** | **Header Submenus** will allow you to build a header menu - with submenus - using plain text! | | 👓 | **Preview** | [Preview on Discourse Theme Creator](https://discourse.theme-creator.io/theme/Discourse/header-submenus) | | 🛠 | **Repository Link** | [https://github.com/discourse/discourse-header-submenus](https://github.com/discourse/discourse-header-submenus) | | 📖 | **New to Discourse Themes?** | [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) | Install this theme component > [@](#): > > :discourse2: As this is an #official theme component maintained by the Discourse team, #Support, #Contribute > Bug, #Contribute > UX, and #Contribute > Feature requests can be made in the respective categories here on Meta, and tagged with the appropriate theme component tag. Click on a link below to get one started. 👍 > > [❓  **Support**](https://meta.discourse.org/new-topic?category_id=6&tags=header-submenus "Ask for support on configuring and using Header Submenus") [🐛  **Bug**](https://meta.discourse.org/new-topic?category_id=1&tags=header-submenus "A bug report means something is broken, preventing normal/typical use of the theme component") [👀  **UX**](https://meta.discourse.org/new-topic?category_id=9&tags=header-submenus "Discussion about the user interface of Header Submenus, and how features are presented (including language and UI elements)") [💡  **Feature**](https://meta.discourse.org/new-topic?category_id=2&tags=header-submenus "Discussion about how existing Header Submenus features can be improved or enhanced, and how proposed new features could work") ### Features Desktop ![1](https://global.discourse-cdn.com/meta/original/3X/8/6/86ac63e59f37ae152f40d86f412042df2b6221ba.png) ![2](https://global.discourse-cdn.com/meta/original/3X/8/4/84f01d0c212808a74c5afe0fbf34a86bb677cbaa.png) Mobile ![3](https://global.discourse-cdn.com/meta/original/3X/9/a/9a682a809379f3e8a133d6df0826bb17cc849c0d.png) ### Settings | Name | Description | | --- | --- | | Menu items | Add menu items. One item per line in this order: Text, icon, title, view. | | Submenu items | Add submenu items. One item per line in this order: Parent, text, icon, URL, target, title. | | Svg icons | Include FontAwesome icon classes for each icon used in the lists above. | | Fixed mode | Force the menu to be visible at the top of the screen regardless of scroll position - Desktop only | | Show caret | Show caret icons next to menu items | | Invert position | Display menu items on the opposite side of the screen | | Menu background | Background color for the menu. (hex, rgb, rgba or CSS color name) | | Menu item color | Color for menu items. (hex, rgb, rgba or CSS color name) | | Menu-item-active-background | Background color for menu items when active. (hex, rgb, rgba or CSS color name) | | Menu-item-active-color | Color for menu items when active. (hex, rgb, rgba or CSS color name) | | Submenu background | Background color for submenus. (hex, rgb, rgba or CSS color name) | | Submenu item color | Color for submenu items. (hex, rgb, rgba or CSS color name) | | Submenu item hover background | Background color for submenus items when hovered. (hex, rgb, rgba or CSS color name) | | Submenu item hover color | Color for submenus items when hovered. (hex, rgb, rgba or CSS color name) | | Divider color | Color for divider lines in submenus. (hex, rgb, rgba or CSS color name) | There are four groups of settings 1. **Menu items** 2. **Submenu items** Here’s a quick example to cover points 1 and 2 above: Let’s say I want to add a menu item called `Design` and add a few items to its submenu like so ![4](https://global.discourse-cdn.com/meta/original/3X/0/e/0e69c8d14bba158cd288d5ead00d23327b73c605.png) I would first enter this as a `menu_item` `Design, magic, Get inspired!, vdm` And then enter these as `sub_menu` items `Design, Galleries, th, #, blank, Cool galleries for you to look at.` `Design, Design process, lightbulb-o, #, blank, Learn the basics.` `Design, Blog design, columns, #, blank, What makes for a great blog?` `Design, divider` `Design, Freebies, gift, #, blank, Everyone likes freebies!` `Design, Photoshop tutorials, book, #, blank, Photoshop for beginners.` `Design, Design trends, bar-chart, #, blank, Stay on top of the current trends!` That’s it! The theme comes with a placeholder menu by default, so have a look at that and ask if you have questions. 1. **Layout options.** 2. **Color options** > :discourse2: **Hosted by us?** Theme components are available to use on our Standard, Business, and Enterprise plans. > Last edited by @JammyDodger 2024-06-12T21:46:41Z > > > **Check document** > > > > Perform check on document: --- _[View the full topic](https://meta.discourse.org/t/header-submenus/94584)._