Horizontal Navigation
Add a navigation bar to appear below the top banner on a page using the Full Width, Page with Sidebar or Homepage page layouts. Add to child section 'nav-branch' to apply to pages in the current branch or 'nav-single' to only apply to the parent section.
Content Type Details
- ID: 487
- Name: Dallas - Horizontal Navigation
- Minimum user level: Contributor
- Use with page layouts: Homepage, Full Width, Page with Sidebar - in Main Body
Please ensure that the section name is exactly 'nav-branch' or 'nav-single' in all lowercase. Additionally, make sure the 'Show in Navigation' option for the 'nav-branch' / 'nav-single' section is unchecked:
When adding to child section 'nav-branch' the Horizontal Navigation is inherited by all pages in the current branch. When adding to child section 'nav-single' the Horizontal Navigation is applied only to the parent page.
A Horizontal Navigation can be excluded from a branch by adding an empty 'nav-branch' child section.
Setting the Navigation Items - Automatic Option
By default the Horizontal Navigation displays sibling sections set to 'Show in navigation' of the 'nav-branch' / 'nav-single' child section. See the following example showing screenshots of the site structure and corresponding output for a Horizontal Navigation. Sections set to not show in navigation have a outline folder icon in the site structure:
Setting the Navigation Items - Manual Option
To override the default automatic option add link sections under your 'nav-branch' / 'nav-single' child section. There are steps on how to create a link section available in the Terminalfour documentation.
See the following example showing screenshots of the site structure for the homepage which has a 'nav-single' section populated with manual items and corresponding output for a Horizontal Navigation. Each link is a link section, identified by the link icons in the screenshot:
Content Type Elements Details
| Name | Description | Size | Type | Required | Conditionally Shown |
|---|---|---|---|---|---|
| Name | The Name element | 80 Characters | Plain Text | Yes | No |
| Label | Add a label for the navigation shown on mobile and used in aria-label. The label is automatically followed by Quick Links e.g., if label is Student will display 'Student Quick Links' | 100 Characters | Plain Text | Yes | No |
| Background Color | Choose background color Choose from options: Light Blue, Light Grey | N/A | Select Box (List: Dallas - Horizontal Navigation Background Colors) | Yes | No |
Examples
- Full Width - Landing Page page design
- Homepage page design