Tab Navigation

Each site has one main navigation bar that can have its own dropdown list of links.  This is called extened navigation.  Each extended navigation can links with one level of nested links that will appear with an accordion style open/close feature.

NOTE: The light bulb icon is on in the image above. That means that the page has been checked out. A page must be checked out in order to access the properties tab or edit tab content.

Tab Navigation Edit Mode

About Tabs

There are up to 10 tabs that can be used at any time.  The status of each tab is indicated next to the edit button.  Active tabs will have an indicator of "Show Tab" which means its currently being seen on any public facing pages for the site.

Tab order is placed left to right within the main navigation.  Tab 1 to Tab 10 and will display any active tabs that have content.

Each tab has a main link or text (for buttons) that will always show.  Items in the drop-down editor will only display when the tab is activated or focused on. 

 

Inactive / Hidden Tabs

By default any tab that has no content will not show.  In order for a tab to have valid content there must be link or text content within the tab editor.  Putting content in the drop-down area without having content in the main tab will be seen as an invalid content.

 

Page Properties: Hide a Tab

You can also hide tabs using the page properties.  Make sure the page is checked out and then in the parameters section of the page properties are checkboxes that give you the ability to hide a tab by unchecking the is visible option. 

Hidden tabs can still be editied but will not display to the public facing pages.  The tab order will automatically show Tab 1 to Tab 10 and skip any tab that is unchecked for is visble.

This will allow you to activate / deactive tabs at any time without needing to do extra work to remove content.

Main tab link or button

Each tab is required to have some type of content for the tab to display in the navigation bar.  Tabs can either be links or buttons.  It is best to have a link but not required.

To create the content simply use the edit button next to each tab and the link editor toolbar will display.  To help make it easier to edit only the options required have been added to this toolbar.

Make a standard hyperlink or simply add text to the edit section.  Do not indent or add secondary styles to main tab content.

Extended Navigation

Add more direct links to content under each link using the tab drop-down editing space.  Here you can add links, titles, and extra options that should be related to the tab content.  These menus will extened below the main tab and appear as a single column to the end user.

• Add a hyperlink
• Add some text but it must be set as a "TITLE"
  • Use the TITLE class from the styles menu 

The left, center, and right classes will align the link text.  Classes that have an icon in their name will place that icon before the link to help users understand quickly what type of link it is.  This is completely optional.

Creating Nested Extended Navigation

If you want to create a sub group on any link within the extended navigation its easy to do.  Nesting requires that you have a primary link first. 

To create sub links use the indent feature in the editing toolbar. There is only one level of nesting allowed so do not use the indent feature to try and make multiple levels of nested links.

In the editor you will only see the indented links but when it is published and rendered on the public facing page it will automatically nest all indented items with their parent link.