A lightning:verticalNavigationItemIcon component is a navigation item that displays an icon to the left of the item label.
Here's an example that creates a navigation menu with icons on the navigation items.
<aura:component> <lightning:verticalNavigation> <lightning:verticalNavigationSection label="Reports"> <lightning:verticalNavigationItemIcon label="Recent" name="recent" iconName="utility:clock" /> <lightning:verticalNavigationItemIcon label="Created by Me" name="created" iconName="utility:user" /> <lightning:verticalNavigationItem label="All Reports" name="all" iconName="utility:open_folder" /> </lightning:verticalNavigationSection> </lightning:verticalNavigation> </aura:component>
Icons from the Lightning Design System are supported. Visit https://lightningdesignsystem.com/icons to view available icons.
Attribute Name | Attribute type | Description | Required? |
---|---|---|---|
body | Component[] | The body of the component. In markup, this is everything in the body of the tag. | |
class | String | A CSS class for the outer element, in addition to the component's base classes. | |
title | String | Displays tooltip text when the mouse moves over the element. | |
label | String | The text displayed for this navigation item. | Yes |
name | String | A unique identifier for this navigation item. | Yes |
href | String | The URL of the page that the navigation item goes to. | |
iconName | String | The Lightning Design System name of the icon. Names are written in the format 'utility:down' where 'utility' is the category, and 'down' is the specific icon to be displayed. |