This article covers setting up primary menus within the navigational system.
- What are primary menus?
- How do I set up a primary menu?
- How do I display lists within menus?
- Featured and non-featured menu items
- Saving and publishing menus
What are primary menus?
The primary menu is usually the first point of discovery for any user. Typically presented in the header of the user's app, primary menu items can link to predefined lists or to user-specific content (e.g., bookmarks.)
AXIS facilitates the display of both primary and sub-menus (drawers) within the header, both of which can be dynamically managed within Presentation Manager.
Our example below shows a primary menu containing Home, Movies, and TV. When you set up a primary menu it will appear on all pages throughout your applications.
How do I set up a primary menu?
- To get started, navigate to DISPLAY and select Menus.
Before adding menu details, ensure you have the required menu variant selected.
The selection on the left-hand side (highlighted in green) determines the navigation area in focus, i.e. Header, Account, Footer, Mobile Nav Bar, or Metadata.
Note: Although some fields are different, the process for adding menu items is similar for all navigation areas.
2. Select an existing or create a new primary menu item using the button.
3. Enter information into the relevant fields.
- Enter label (mandatory): This is what users will see as the menu item in their app. As you type into the text field, prompts appear based on matching letter sequences from your published pages. You can choose a different label - it doesn't need to be one of these.
|
If you enter a label that's not recognized you'll have two options:
|
- Enter destination: Specify a destination page URL for the menu item. Destinations can be paths within the app's published pages, or external URLs (which need to be full URLs, e.g., https://www.deltatre.com).
- Featured: This is used to determine the priority of your primary menu items when your app's horizontal screen size is limited, for example, when on mobile or TV. The order and visibility in the sidebar menus are unaffected by this setting. See more on featured items in the section below.
-
Sub-Menu (optional): Select
to add a sub-menu that will sit directly below the primary menu item. Read our Add sub-menus article to learn more about configuring sub-menus.
- Menu Content (optional): This option allows you to use the primary menu to visually highlight specific content by linking to and displaying an existing list. The next section explains how to do this.
Note: The extent to which the display of menu content is supported differs by device.
How do I display lists within menus?
Easily present content to customers via lists within menus, including new content lists, or personalized lists such as bookmarks.
- Enter heading: Specify the content heading here; this appears above the list content.
- Select list (mandatory if a heading is specified): Choose a list to display within your menu. A preview of asset imagery displays.
In this example a single-item list is selected as menu content for the Movies primary menu item, to showcase a movie.
The content is displayed when the user selects Movies in their app's menu. Clicking on the image takes the user to the asset's item detail page.
Another example is where the main body of the Account menu drawer displays images of the user's entitlements, bookmarks, or watched items, with the submenu displayed on the side.
This example shows an implementation for a user's Bookmarks.
|
|
As you edit, if there are unsaved changes in any of the tabs, the modified label displays on the tab. |
Notes
- While you can add multiple primary menu items and sub-menus to the Header navigation area, only one primary menu list (with any associated sub-menus) can be added to the Account and Footer navigation.
- However, be careful of adding too many primary menu items. This can cause the navigation bar to wrap oddly on some devices. Less is generally more!
Featured and non-featured menu items
Select an app type below to see how the featured option looks in the AXIS reference apps:
Below shows how primary menus display on responsive web apps. Here, the number of menu items that appear is determined by the screen width. In the first image, featured menu items (in this example, Home and Movies A-Z) appear alongside non-featured menu items.
As the width decreases, non-featured menu items are shifted into the side menu.
After a certain width, only featured menu items are displayed, as shown below:
Below shows how primary menus display on TV apps. Here, featured menu items appear in the top navigation bar.
Non-featured primary menu items can be found in the side menu, alongside featured menu items.
Below shows how primary menus display on iPad/Tablet apps. Here, featured menu items appear in the top navigation bar. Non-featured primary menu items can be found in the side menu, alongside featured menu items.
Below shows how primary menus display on mobile apps. Here, featured menu items appear in the top navigation bar. Non-featured primary menu items can be found in the side menu, alongside featured menu items.
Saving and publishing menus
By clicking the button, the menu items are visible to your end-users to view and interact with.
Need to make additional changes before going live?
Not a problem, save your menus without publishing by selecting the More button, followed by Save. Your changes are saved, but your menu items remain in a draft state.
To create additional menu items, click the button.
Want to learn how to configure the menu to link to a list? Read our Linking lists to menus article. Or see Editing menus to find out how to make changes to an existing menu once you've set it up.