soc-core/src/html/elements/navigation.html

Core sass framework based on Bootstrap

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">

            <!-- Sidebar toggler -->
            <button type="button" class="toggler-navbar" id="soc-sidebar-toggler">
                <i class="fa fa-angle-double-left fa-2x" aria-hidden="true"></i>
                <i class="fa fa-angle-double-right fa-2x hide" aria-hidden="true"></i>
            </button>

            <!-- Navigation dropdown toggler (small screens) -->
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false"
                aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

            <!-- Title -->
            <a class="navbar-brand" href="#top">Project name</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-left">
                <li><a href="#typography">Typography</a></li>
                <li><a href="#components">Components</a></li>
                <li><a href="#grid">Grid</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                  Soc Components <span class="caret"></span>
                </a>
                    <ul class="dropdown-menu">
                        <li role="separator" class="divider"></li>
                        <li class="dropdown-header">Layouting</li>

                        <li><a href="#soctabs">Tabs</a></li>
                        <li><a href="#socstates">States</a></li>
                        <li><a href="#socheader">Header</a></li>
                        <li><a href="#socpanel">Panel</a></li>
                        <li><a href="#soctable">Table</a></li>
                        <li><a href="#socaccordion">Accordion</a></li>

                        <li role="separator" class="divider"></li>
                        <li class="dropdown-header">Forms</li>

                        <li><a href="#socforms">Forms</a></li>
                        <li><a href="#socformelements">Form elements</a></li>

                        <li role="separator" class="divider"></li>
                        <li class="dropdown-header">Page elements</li>

                        <li><a href="#socnotfound">Not found</a></li>
                        <li><a href="#socloading">Loading</a></li>

                        <li role="separator" class="divider"></li>
                        <li class="dropdown-header">Notifications</li>

                        <li><a href="#socalerts">Alerts</a></li>
                        <li><a href="#toaster">Toaster</a></li>

                        <li role="separator" class="divider"></li>
                        <li class="dropdown-header">Searching</li>

                        <li><a href="#socsidebar">Sidebar</a></li>
                        <li><a href="#socfilterbar">Filterbar</a></li>
                        <li><a href="#socseach">Search elements</a></li>

                        <li role="separator" class="divider"></li>
                        <li class="dropdown-header">Actions</li>

                        <li><a href="#socactionbar">Actionbar</a></li>
                        <li><a href="#socactionbutton">Actionbutton</a></li>



                    </ul>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right navbar-user">
                <li>
                    <a><span class="fa fa-user"></span> The User</a>
                </li>
            </ul>
        </div>
    </div>
</nav>