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.

<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.

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.