Navigation - SB Admin Pro

Borders

Horizontal:

HTML
PUG

nav.nav.nav-borders
    a.nav-link.active(href='#!') Active
    a.nav-link(href='#!') Link
    a.nav-link(href='#!') Link
    a.nav-link.disabled(href='#!', tabindex='-1', aria-disabled='true') Disabled

The .nav-borders component is a custom variation of Bootstrap's nav component built for SB Admin Pro. You can use any justify flex utilities to change the horizontal alignment of the nav, and you can also use this nav component in an unordered list format.

nav.nav.nav-borders.flex-column
    a.nav-link.active(href='#!') Active
    a.nav-link(href='#!') Link
    a.nav-link(href='#!') Link
    a.nav-link.disabled(href='#!', tabindex='-1', aria-disabled='true') Disabled

You can also use the nav borders variant when using the .flex column utility to create a vertical nav. The borders will move from the bottom of the nav links to the right hand side. In this example, we've set a max width of 10rem to the container that this nav is being used within.

Custom Side Navigation Component

HTML
PUG

nav.sidenav.sidenav-light
    .sidenav-menu
        .nav
            .sidenav-menu-heading Heading
            a.nav-link(href='#!')
                .nav-link-icon
                    i(data-feather='feather')
                | Link
            a.nav-link(href='#!')
                .nav-link-icon
                    i(data-feather='feather')
                | Another Link
            a.nav-link.disabled(href='#!')
                .nav-link-icon
                    i(data-feather='feather')
                | Another Link
    .sidenav-footer
        | SB Sidenav Footer

The .sidenav component extends the default Bootstrap nav component. A working example of the custom sidenav can be seen on the dashboard layout of the SB Admin Pro theme. The sidenav being used in the dashboard layout has a container with certain responsive behaviors, but the component itself can be used on a standalone basis.

Custom Sticky Nav Component

The sticky menu on the side of this page is a demo of the custom sticky nav component.

HTML
PUG

.container-xl.px-4-fluid
    .row
        //- Content
        .col-lg-9
            h2#navAnchor1
                | Nav anchor 1 content
            h2#navAnchor2
                | Nav anchor 2 content
            h3#navAnchorNested
                | Nested nav anchor content

        // Sticky Navigation
        .col-lg-3
            .nav-sticky
                .card
                    .card-body
                        //- Nav menu
                        ul.nav.flex-column#stickyNav
                            //- Nav item
                            li.nav-item
                                a.nav-link(href='#navAnchor1') Nav Anchor 1
                            //- Nav item (with nested items)
                            li.nav-item
                                a.nav-link(href='#navAnchor2') Nav Anchor 2
                                //- Nested nav menu
                                ul.nav.flex-column.ms-3
                                    //- Nested nav menu item
                                    li.nav-item
                                        a.nav-link(href='#navAnchorNested') Nested Nav Anchor

The .nav-sticky component utilizes the Bootstrap scrollspy functionality along with custom styling to create a sticky navigation component that you can use on inner pages within your application. The right side menu of the style reference pages are all examples of the sticky nav being used. You can set the offset and the scroll behavior of this menu within the ../assets/js/scripts.js file.

The code example above requires the JS to be used, which is included by default in the scripts.js file. The above example also uses a .container-xl.px-4-fluid which may not be necessary if your page layout already includes a container.

Bootstrap Documentation Available

Navs are a default component included with the Bootstrap framework. For more information on implementing, modifying, and extending the usage of Bootstrap nav components within your project, visit the official Bootstrap navs documentation page.

Visit Bootstrap Navs Docs

Nav Borders New
- Horizontal
- Vertical
Side Navigation
Sticky Navigation