Page tree

Creating Menus

Last updated

Watch and Learn

Overview of the Menu Page (2:15)

Get the basics on menus.

Menus are an integral tool for your users. They allow you to manage your site content and provide a clear path for users to navigate your information architecture.

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.

The menu is defined by an architect page that lives in the Theme Press Default space. If you're not familiar with architect pages, you should review them first, before beginning to modify menu architect pages.

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.

 

Menu Tab

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.

Menu Tab

When viewing the Menu tab from this page, you'll notice three layers:

  • Menu Layer
  • Panel Layer (Departments)
  • Panel Layer (Projects)

 

Layers

The menu layer holds a bullet list, and the first two items in the list link to panel layers:

  • Departments
  • Projects

 

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.

Top Level

Second Level

Third Level

Upon selecting  Departments  in the top level, a dropdown appears. Within this level, you see:

  • Engineering

  • IT

  • Support +

  • HR

When clicking on Support, the dropdown refreshes to show another level:

  • Customer

  • Products +

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.

How to Build a Fluid Menu

Our menu page contains a menu layer and three panel layers. Build this by creating a panel menu first (see Panel Menus above).

Once this has been created and working as expected, create a nested bullet list (Unordered List) in the panel you would like to contain a fluid menu.

We built ours under the "Support" menu layer first and then the "Products" layer.

Menu Tab

In the Menu tab, we named each panel layer using the first three words in the menu layer's bullet list:

  • Departments
  • IT
  • Support
  • HR

 

Next

Once that is done, you apply the class “fluid-menu” to each block that has one. 

We added the fluid-menu class to the block that lives within the Support Layer first and then the Products layer.

When adding a CSS class to the block, the page refreshes and all child items disappear from view. If you click a parent item, the children appear. To see the full list, edit the panel's block.

Note: The fluid-menu.css class is built into Theme Press–you don't need to add it yourself.

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.

Prerequisite

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 PageBullet List

Add CSS

Our next step is to turn the bullet list into a horizontal menu. To do so, we add the following CSS to the theme.

CSS Code
.brikit-content-block.sub-menu ul {
list-style-type: none;
width: 500px;
margin: 0 auto;
}

.brikit-content-block.sub-menu ul li {
float: left;
margin: 0 42px;
}

Custom Code

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.

CSS Class

Notice that our sample code includes the sub-menu class.

Apply CSS

After adding custom CSS to the theme, we return to the layout page. Using the  Layout tab in the Creating Menus, we expand the accordion that corresponds to the block holding the bullet list.

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.

Placement Options

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?