Improve this doc View source

pfVerticalNavigation - Basic
directive in module patternfly.navigation

Description

Component for vertical navigation. This sets up the nav bar header with the collapse button (hamburger) and the application brand image (or text) as well as the vertical navigation bar containing the navigation items. This directive supports primary, secondary, and tertiary navigation with options to allow pinning of the secondary and tertiary navigation menus as well as the option for persistent secondary menus.

The remaining parts of the navbar header can be transcluded.

Tha navigation items are marked active based on the current location and the href value for the item. If not using href's on the items to navigate, set update-active-items-on-click to "true".

This directive works in conjunction with the main content container if the 'container-pf-nav-pf-vertical' class selector is added to the main content container.

Usage

as element:
<pf-vertical-navigation - -basic
       brand-src="{string}"
       brand-alt="{string}"
       show-badges="{boolean}"
       persistent-secondary="{boolean}"
       hidden-icons="{boolean}"
       items="{array}"
       navigate-callback="{function}"
       item-click-callback="{function}"
       update-active-items-on-click="{boolean}"
       ignore-mobile="{boolean}">
</pf-vertical-navigation - -basic>

Parameters

ParamTypeDetails
brandSrcstring

src for brand image

brandAltstring

Text for product name when brand image is not available

showBadgesboolean

Flag if badges are used on navigation items, default: false

persistentSecondaryboolean

Flag to use persistent secondary menus, default: false

hiddenIconsboolean

Flag to not show icons on the primary menu, default: false

itemsarray

List of navigation items

  • .title - (string) Name of item to be displayed on the menu
  • .iconClass - (string) Classes for icon to be shown on the menu (ex. "fa fa-dashboard")
  • .href - (string) href link to navigate to on click
  • .children - (array) Submenu items (same structure as top level items)
  • .badges - (array) Badges to display for the item, badges with a zero count are not displayed.
    • .count - (number) Count to display in the badge
    • .iconClass - (string) Class to use for showing an icon before the count
    • .tooltip - (string) Tooltip to display for the badge
    • .badgeClass: - (string) Additional class(es) to add to the badge container
navigateCallbackfunction

function(item) Callback method invoked on a navigation item click (one with no submenus)

itemClickCallbackfunction

function(item) Callback method invoked on an item click

updateActiveItemsOnClickboolean

Flag if active items should be marked on click rather than on navigation change, default: false

ignoreMobileboolean

Flag if mobile state should be ignored (use only if absolutely necessary) default: false

Example

Source



























Demo