function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Sascha DeinertSascha Deinert 

Lightning Navigation Design

Hi,

I have some question about the Lightning Design System.
Below you will find a screen and the code for this screen. 

Can I put the text closer to the left border?
Can I change the backgroundcolor from the Header or the marked item?
Can I change the margin between the different items?

Pic1
  
<apex:page standardStylesheets="false" docType="html-5.0">
    
<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" lang="en">

<apex:slds /> 
    
<div class="slds-scope">
 
<div class="Navigation" style="width: 180px;">
<nav class="slds-nav-vertical slds-nav-vertical_compact" aria-label="Sub page">
<div class="slds-nav-vertical__section">
    <h2 id="entity-header" class="slds-nav-vertical__title slds-text-title_caps"><b>Header 1</b></h2>
<ul>   
    <li class="slds-nav-vertical__item"><a href="" target="_parent" class="slds-nav-vertical__action" aria-describedby="entity-header">Test 1</a></li>
    <li class="slds-nav-vertical__item"><a href="" target="_parent" class="slds-nav-vertical__action" aria-describedby="entity-header">Test 2</a></li>
    <li class="slds-nav-vertical__item"><a href="" target="_parent" class="slds-nav-vertical__action" aria-describedby="entity-header">Test 3</a></li>
</ul>
</div>
    
<div class="slds-nav-vertical__section">
    <h2 id="folder-header" class="slds-nav-vertical__title slds-text-title_caps"><b>Header 2</b></h2>
<ul>
    <li class="slds-nav-vertical__item"><a href="" target="_parent" class="slds-nav-vertical__action" aria-describedby="folder-header">Test 1</a></li>
    <li class="slds-nav-vertical__item"><a href="" target="_parent" class="slds-nav-vertical__action" aria-describedby="folder-header">Test 2</a></li>
</ul>
</div>
    
</nav>
    
</div>
        
</div> <!-- ENDE SLDS-SCOPE -->

</html>
    
</apex:page>
Thanks,
Sascha