Lightning Components Developer Guide
jNewer Version Available
lightning:verticalNavigationItemIcon
A link and icon within a lightning:verticalNavigationSection or lightning:verticalNavigationOverflow. This component requires API version 41.0 and later.
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.
1<aura:component>
2 <lightning:verticalNavigation>
3 <lightning:verticalNavigationSection label="Reports">
4 <lightning:verticalNavigationItemIcon
5 label="Recent"
6 name="recent"
7 iconName="utility:clock" />
8 <lightning:verticalNavigationItemIcon
9 label="Created by Me"
10 name="created"
11 iconName="utility:user" />
12 <lightning:verticalNavigationItem
13 label="All Reports"
14 name="all"
15 iconName="utility:open_folder" />
16 </lightning:verticalNavigationSection>
17 </lightning:verticalNavigation>
18</aura:component>Icons from the Lightning Design System are supported. Visit https://lightningdesignsystem.com/icons to view available icons.
Attributes
| 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. |