Navigation: Secondary Menus

Site navigation is a key factor in effective web design. We offer a wide variety of navigation menu widget options in addition to the core site navigation which comes standard with your UTMB Sitefinity site. You can easily customize the depth of nested links along with various design details specific to each menu option.

Layout Views

The widget component template

Learn how to do it:

  • Add a Breadcrumb widget to a page

    Within the edit view of a page, you can add the breadcrumb widget to a page.

    1. On the right side menu, click the Content tab, click the Navigation drop-down menu and find the Breadcrumb widget. Click, hold and drag the Breadcrumb widget onto the desired part of the page, and then release the widget
      Screenshot showing breadcrumb widget on a page

Horizontal

Tabs

Topbar

Best used with the class nav-mini applied.

Vertical

Sitemap

Deprecated Layouts: Nav list, Nav list drop downs, Pills, UTMB Institutional menu (Please do not use)

Customizations

Customize with CSS Classes.

Learn how to do it:

  • Add CSS classes to a navigation widget on a page
    1. In the edit view of the page, click edit on the navigation widget.
      Screenshot of the edit button on the navigation menu
    2. Click More options and insert CSS classes in the CSS classes field. Multiple CSS classes can be added but must be separated by a space.
      Screenshot or navigation css field

Style

Centered Navigation: nav-center

This customization is only available using the Horizontal layout view

Pill Navigation: nav-pills

This customization is only available using the Horizontal, and Topbar layout views

Modern Tabs Navigation: tabs-modern

This customization is only available using the Tabs layout view

Size

Mini Navigation: nav-mini

This customization is only available using the Horizontal, Sidebar, and Topbar layout views

Large Navigation: nav-large

This customization is only available using the Horizontal, Topbar, and Vertical layout views

Numbered

Numbered Navigation: list-numbered

This customization is only available using the Sitemap layout view

Training

Add navigation widget to a page

  • Add a Navigation widget to a page

    Within the edit view of a page, you can add the navigation widget to a page.

    1. On the right side menu, click the Content tab, click the Navigation drop-down menu and find the Navigation widget. Click, hold and drag the Navigation widget onto the desired part of the page, and then release the navigation widget Screenshot showing a navigation widget on a page
  • Select which pages to display as links in the navigation
    1. In the edit view of the page, click edit on the navigation widget. Screenshot of the edit button on the navigation menu
    2. To choose which pages to display as links in the navigation, select one of the following options:
      • Top-level pages (and their child-pages if the widget template allows this)
        The Navigation widget displays links to pages that are on top level in the pages' hierarchical structure and have no parent.
      • All pages under particular page
        The Navigation widget displays links to pages that are children of just one specific page.
        1. In the treeview, select the parent page and click Done selecting.
      • All pages under currently opened page
        The Navigation widget displays links to pages that are children of the currently opened page.
      • All sibling pages of currently opened page
        The Navigation widget displays links only to pages that are siblings of the currently opened page.
      • Custom selection of pages…
        The Navigation widget displays links only to specific pages you select.
        1. In the treeview, select the checkboxes next to the pages that you want to be part of the navigation.
        2. To add external pages:
          1. Click the External URLs tab
          2. Click the Add external URL button
          3. Enter the title to be displayed on the navigation and the full URL
        3. When finished, click Done selecting.
          Screenshot showing navigation display options
  • Select the depth of the navigation nodes
    1. In the edit view of the page, click edit on the navigation widget. Screenshot of the edit button on the navigation menu
    2. Under Levels to include, choose one of the following options:
      • All
        When you select a parent or a group page, the Navigation widget always displays its children pages as well.
      • Number
        The Navigation widget displays the children pages only up to a level of your choice. Choose a level from the Number dropdown menu. For example, if you select 2, the system displays only the top two levels of navigation - the top pages and their immediate children.
        Screenshot of levels to include drop down menu
  • Select the template you want to use for displaying navigation
    1. In the edit view of the page, click edit on the navigation widget. Screenshot of the edit button on the navigation menu
    2. From the Template dropdown menu, select the template you want to use for displaying navigation:
  • Add CSS classes to a navigation widget on a page
    1. In the edit view of the page, click edit on the navigation widget.
      Screenshot of the edit button on the navigation menu
    2. Click More options and insert CSS classes in the CSS classes field. Multiple CSS classes can be added but must be separated by a space.
      Screenshot or navigation css field

Add breadcrumb widget to a page

  • Add a Breadcrumb widget to a page

    Within the edit view of a page, you can add the breadcrumb widget to a page.

    1. On the right side menu, click the Content tab, click the Navigation drop-down menu and find the Breadcrumb widget. Click, hold and drag the Breadcrumb widget onto the desired part of the page, and then release the widget
      Screenshot showing breadcrumb widget on a page
  • Breadcrumb setup

    In the edit view of the page, click edit on the breadcrumb widget.
    Screenshot showing the edit button

    1. Under What to include include in the breadcrumb, choose one of the following radio buttons:
      • Full path to the current page
        The system displays the full path to the current page, starting from the homepage.
      • Path starting from a specific page...
        The system displays the path from a selected page to the current page.

        Click Select page and select the page where you want the breadcrumb to begin from.

        NOTE: For the breadcrumb to fulfill its purpose, you should select a page that is the parent to the current page.

        Screenshot of What to include in the breadcrumb options
    2. Under Show…, choose one or more of the following options:
      • Home page link
        Displays the home page at the beginning of the breadcrumb.
      • Current page in the end of the breadcrumb
        This displays the current page as a link at the end of the breadcrumb.
      • Group pages in the breadcrumb
        A group page is a container for pages and does not have its own content. It redirects to its first child page.


        NOTE
        : For this option to function as intended, you must also have selected Current page in the end of the breadcrumb.
        Screenshot showing the breadcrumb show options

Explore other Navigation Options:

On this page: