List with Code Examples

Basic

Inbox
Drafts
Trash
Spam

                
<ul>
    <li onclick="navigate('Inbox')"><i class="fas fa-inbox"></i>Inbox</li>
    <li onclick="navigate('Drafts')"><i class="fas fa-file-alt"></i>Drafts</li>
    <li onclick="navigate('Trash')"><i class="fas fa-trash"></i>Trash</li>
    <li onclick="navigate('Spam')"><i class="fas fa-exclamation-circle"></i>Spam</li>
</ul>

Nested List

Sent Mail
Drafts
Inbox
Starred

                    
<ul>
    <li onclick="navigate('Sent Mail')"><i class="fas fa-paper-plane"></i>Sent Mail</li>
    <li onclick="navigate('Drafts')"><i class="fas fa-file-alt"></i>Drafts</li>
    <li onclick="navigate('Inbox')"><i class="fas fa-inbox"></i>Inbox</li>
    <li onclick="navigate('Starred')"><i class="fas fa-star"></i>Starred</li>
</ul>

Folder List

Photos - Jan 9, 2014
Work - Jan 7, 2014
Vacation - July 20, 2014

                            
<ul>
    <li onclick="navigate('Photos')"><i class="fas fa-camera"></i>Photos - Jan 9, 2014</li>
    <li onclick="navigate('Work')"><i class="fas fa-briefcase"></i>Work - Jan 7, 2014</li>
    <li onclick="navigate('Vacation')"><i class="fas fa-plane"></i>Vacation - July 20, 2014</li>
</ul>

Selected List

Important
Work
Personal

                        
<ul>
    <li onclick="navigate('Important')"><i class="fas fa-exclamation"></i>Important</li>
    <li onclick="navigate('Work')"><i class="fas fa-briefcase"></i>Work</li>
    <li onclick="navigate('Personal')"><i class="fas fa-user"></i>Personal</li>
</ul>