3 Ways to Improve SharePoint Quick Launch Style

In our last couple of SharePoint branding projects here at itgroove, we’ve added a little bit of sparkle to SharePoint’s left navigation, or “Quick Launch”. Here’s how we added some style with a bit of CSS and jQuery.

First, we wanted each site’s OneNote Notebook to pop, as it’s different from a list, library or site page.

Second, we wanted to differentiate the Recycle Bin from the rest of the navigation as well.

Lastly, we wanted a way to signify secured libraries to help site administrators rest assured that only those with appropriate permissions could see and access them (users without privileges for those libraries would not see them at all). To accomplish this, we added “(Secured)” in the actual title of each library, and then used a bit of jQuery to look for “(Secured)” in the menu items. When “(Secured)” is found, the word is removed and a CSS class is added, with styling to add a lock icon.

Here’s an example of what the final result looked like:

sharepoint quick launch style

Let’s get started. We’ll need jQuery loaded in the master page and a custom CSS file ready to go.

  1. Add OneNote Icon to the site notebook


    [code lang=”js”]

    /* Add the OneNote icon next to Notebooks in Quick Launch */
    function addNotebookIcon(){
    $(‘#sideNavBox .menu-item-text:contains("Notebook")’).not(‘:contains("Notebooks")’).each(function() {





    [code lang=”css”]
    .itgNotebook {
    background: transparent url("/_catalogs/masterpage/YourBrandingFiles/onenote-icon.svg") no-repeat scroll 0px 0px / 20px 20px;
    display: inline-block;

    #sideNavBox ul.static .itgNotebook {
    padding: 3px 0 3px 27px;

    #sideNavBox ul.ms-core-listMenu-root > li.static > a.menu-item > span > span.itgNotebook {
    padding: 1px 0 3px 27px;


  2. Add lock icon to secured libraries

    Here’s the code we used to look for the word “(Secured)” and replace it with the lock icon. For this icon, we’re using Font Awesome by Dave Gandy.


    [code lang=”js”]

    /* Add the secured lock next to (Secured) libraries */

    function addSecuredLock(){

    $(‘#sideNavBox .menu-item-text:contains("(Secured)")’).each(function() {

    $(this).text($(this).text().replace("(Secured)", ""));






    [code lang=”css”]

    /*** Secured Libraries ***/

    .itgSecuredLibrary:before {
    font-family: FontAwesome;
    content: "\f023";

  3. Add Recycle Bin icon

    For this piece, we wanted to match the icon that Microsoft is using in some of the system pages. They’re using an icon font called “SPO365Icons”, and so we’re able to tap into that and grab the character code for the Recycle Bin icon. We don’t need any Javascript/jQuery here, we can target the Recycle Bin by using the “title” attribute on it’s <a> tag.


    [code lang=”css”]
    /*** Recycle Bin ***/

    src:url("/_layouts/15/fonts/Office365Icons.eot?#iefix") format("embedded-opentype"),
    url("/_layouts/15/fonts/Office365Icons.woff") format("woff"),
    url("/_layouts/15/fonts/Office365Icons.ttf") format("truetype"),
    url("/_layouts/15/fonts/Office365Icons.svg#web") format("svg");

    #sideNavBox ul.ms-core-listMenu-root li.static > a.menu-item[title="Recycle Bin"]:before {
    font-family: "SPO365Icons";
    margin-right: 5px;
    position: relative;
    top: 2px;

    #sideNavBox ul.ms-core-listMenu-root li.static > a.menu-item[title="Recycle Bin"]{

    #sideNavBox ul.ms-core-listMenu-root li.static > a.menu-item:hover[title="Recycle Bin"]{

And that’s it!

SharePoint Quick Launch style

4 responses to “3 Ways to Improve SharePoint Quick Launch Style

  1. Hi Matt,

    Great post! Are you able to share the CSS for this? Very similar to what I’m looking at doing.



  2. I love the idea of the yellow lock icons on secured libraries!

    I’ve installed FontAwesome in my Sharepoint 2013 web server’s Windows > Fonts folder, and I copied your script into a Script Editor Web Part, but I can’t get your code to work on a page with “(Secured) Library Name” listed as a link in its left navigation bar.

    I don’t know if the script can’t find the font, or if it isn’t locating the left navigation bar.

    Any suggestions?

Comments are closed.