Vertical Navigation Item Icon | Legacy Components | Lightning Component Reference

lightning:verticalNavigationItemIcon

A link and icon within a lightning:verticalNavigationSection or lightning:verticalNavigationOverflow. This component requires API version 41.0 and later.

For Aura components only. For LWC development, use lightning-vertical-navigation-item-icon.

For Use In

Lightning Experience, Experience Builder Sites, Salesforce Mobile App, Lightning Out (Beta), Standalone Lightning App, Mobile Offline

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      />
9      <lightning:verticalNavigationItemIcon
10        label="Created by Me"
11        name="created"
12        iconName="utility:user"
13      />
14      <lightning:verticalNavigationItem label="All Reports" name="all" />
15    </lightning:verticalNavigationSection>
16  </lightning:verticalNavigation>
17</aura:component>

Icons from the Lightning Design System are supported. Visit https://lightningdesignsystem.com/icons to view available icons.

When applying Lightning Design System classes or icons, check that they are available in the Lightning Design System release tied to your org. The latest Lightning Design System resources become available only when the new release is available in your org.

Attributes

Name	Description	Type
body	The body of the component. In markup, this is everything in the body of the tag.	Aura.Component[]
class	A CSS class for the outer element, in addition to the component's base classes.	String
href	The URL of the page that the navigation item goes to.	String
iconName	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.	String
label	The text displayed for this navigation item.	String
name	A unique identifier for this navigation item.	String
title	Displays tooltip text when the mouse moves over the element.	String