Improve this doc View source

pfVerticalNavigation - Router
directive in module patternfly.navigation

Description

This example shows how to use pfVerticalNavigation with angular-ui-router's $states and uiSrefs.

Usage

as element:
<pf-vertical-navigation - -router
       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 - -router>

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
  • .uiSref - (string) Optional Angular UI Router state name. If specified, href must be not defined, and vice versa.
  • .uiSrefOptions - (object) Optional object to be passed to Angular UI Router $state.go() function
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