Menus are an integral part of architect pages and allow you to manage your site content and provide a clear path for users to navigate your information architecture.
Theme Press allows you to create menus specific to your content. Applying a menu to the site or a space can help users quickly find relevant information.
Using the Theme Press designer, you can:
- create menu pages
- apply individual menus to the site or a space
- style the menu using the Theme and Menu tabs
- add content elements using the Menu tab
Click the blocks below to learn more about menus.
The top-level menu only consists of one set of options. Within the menu architect page, you add these items using a bullet list.
When viewing the Menu tab, notice that the bullet list lives within the menu layer.
As you might expect, a dropdown menu appears below its top-level item and shows one level of linked items. Within the menu architect page, you add these items as a second level to the bullet list.
Links in Menu
You can link dropdown items; however, you cannot link top-level items that contain subitems.
Menu panels, also called mega menus, allow you to organize various types of content into grouped subitems.
You can see an example in the Demo menu which we've included in the Default space.
When viewing the Menu tab from this page, you'll notice three layers:
- Menu Layer
- Panel Layer (Departments)
- Panel Layer (Projects)
The menu layer holds a bullet list, and the first two items in the list link to panel layers:
To create this connection, we named each panel layer appropriately.
Adding Panel Layers
You can add a panel layer from the menu layer or another panel layer. Just use the + Panel Layer button.
Each panel layer contains three columns with each column containing one block. Notice that the blocks contain headings, bullet lists and images.
This type of panel menu requires you to click on the menu item to open up the panel. This is to maintain compatibility with overall Confluence systems architecture, operate within Atlassian's user interface guidelines, and so that sites remain user-friendly when accessed from mobile devices where mouse-over/hover is not available.
If you want to create expanding menu items, try our fluid feature. Here's an example to illustrate.
Upon selecting Departments in the top level, a dropdown appears. Within this level, you see:
When clicking on Support, the dropdown refreshes to show another level:
The same occurs when clicking on Products.
This type of fluid menu requires you to click on each expandable menu option to move to the next layer. This is to maintain compatibility with overall Confluence systems architecture, operate within Atlassian's user interface guidelines, and so that sites remain user-friendly when accessed from mobile devices where mouse-over/hover is not available.
Sub menus appear most commonly on individual pages or spaces. They exist separately from the main menu of your site and help you add additional navigation.
We've targeted this information toward advanced designers familiar with Theme Press. Therefore, you should know about architect pages and how to implement a layout page before creating a sub menu.
Add Menu Content
In the example above, the content for our sub menu lives on a layout page. This page contains two layers with the second layer holding the sub menu.
Why did you add the sub menu to a layout page?
We added the sub menu to a layout page because we want to show the menu on more than one page. We also want the sub menu to appear well below the main menu.
As seen in the screenshot below, the layer contains one column and one block. To start our menu, we add content to this block in the form of a three-item bullet list.
|Layout Page||Bullet List|
Our next step is to turn the bullet list into a horizontal menu. To do so, we add the following CSS to the theme.
Review the Creating Menus instructions to learn how to upload or add CSS.
You can expand upon this code and change the styling of menu items.
Notice that our sample code includes the
Within this accordion is the Handling expander and then the CSS class field. As you see in this screenshot, we add our
sub-menu class here.
Other than layout pages, you can add a sub menu to generic pages or Theme Press header pages. When doing so, you should consider where to place the sub menu. For example, the main menu appears in the Theme Press header. If you add a sub menu here, you must adjust the position of both menus.
Similar to our example above, you always add CSS code to the applicable theme. The generic page or header page holds the menu content and CSS class.
Still need help?