Navs

Navigational components for building navigation menus such as lists, tabs, or vertical navigation. You can use these classes to create responsive navigation bars and menus.

Basic Example #

Here’s a basic example of a navigation component. You can customize the appearance by using the different classes provided.

    
link
link
link
disabled
    

        
        
HTML
        
    
    <ul class="nav">
    <li class="nav-item">
        <a href="#">link</a>
    </li>
    <li class="nav-item">
        <a href="#">link</a>
    </li>
    <li class="nav-item active">
        <a href="#">link</a>
    </li>
    <li class="nav-item disabled">
        <a href="#">disabled</a>
    </li>
</ul>
    

Justified Navigation #

To align the navigation items to the right, use the justify-content-end class. This makes the items spread across the available width.

    
link
link
link
disabled
    

        
        
HTML
        
    
    <ul class="nav justify-content-end">
    <li class="nav-item">
        <a href="#">link</a>
    </li>
    <li class="nav-item">
        <a href="#">link</a>
    </li>
    <li class="nav-item active">
        <a href="#">link</a>
    </li>
    <li class="nav-item disabled">
        <a href="#">disabled</a>
    </li>
</ul>

Vertical Alignment #

For vertical navigation, you can use the flex-column class, which makes the list items stack vertically.

    
link
link
link
disabled
    

        
        
HTML
        
    
    <ul class="nav flex-column">
    <li class="nav-item">
        <a href="#">link</a>
    </li>
    <li class="nav-item">
        <a href="#">link</a>
    </li>
    <li class="nav-item active">
        <a href="#">link</a>
    </li>
    <li class="nav-item disabled">
        <a href="#">disabled</a>
    </li>
</ul>

Vertical Alignment with Right Alignment #

To create a vertical navigation bar and align it to the right, use both flex-column and align-items-end.

    
link
link
link
disabled
    

        
        
HTML
        
    
    <ul class="nav flex-column align-items-end">
    <li class="nav-item">
        <a href="#">link</a>
    </li>
    <li class="nav-item">
        <a href="#">link</a>
    </li>
    <li class="nav-item active">
        <a href="#">link</a>
    </li>
    <li class="nav-item disabled">
        <a href="#">disabled</a>
    </li>
</ul>

SCSS Overview #

The SCSS code for this component ensures flexibility and customization. Here’s how the styles are structured:

    

        
        
SCSS
        
    
    .nav {
            @extend .w-100, .d-flex, .flex-row, .gap-1;
            
            & .nav-item {
                @extend .p-1, .all-border-small;
            
                &.active {
                    color: get-color(on-primary);
                    background-color: get-color(primary);
            
                    & a {
                        color: get-color(on-primary);
                    }
                }
                
                &.disabled, &.disabled * {
                    user-select: none;
                    cursor: default;
                    color: get-color(disabled-regular);
                }
                
                & * {
                    @extend .pointer;
                }
            
                & a {
                    @extend .text-color;
                }
            }
        
            &:not([class*="align-items"]) {
                @extend .align-items-start;
            }
            
            &:not(.flex-column) {
                @extend .flex-row;
            }
        }

SCSS Structure #

The SCSS structure for the navigation component is designed to provide flexibility in layout and styling. Here is an overview of the key classes and their functionalities: