Nav

The Nav component allows you to build horizontal or vertical navigation menus, tabs, and responsive navigation structures with ease. It provides flexible classes for customization and supports different modes for various navigation layouts.

Description #

The Nav component is used to create horizontal and vertical navigation menus, tabs, and navigation lists. It supports utility classes like flex-column and justify-content-end to change direction and alignment of items. You can also have active and disabled items for better user experience.

• Horizontal (default): Items are displayed in a row.

• Vertical (flex-column): Items are stacked in a column.

• Right Alignment (justify-content-end): Items are aligned to the right.

• Active and Disabled Items: Use active and disabled classes to control item states.

Examples and Classes #

Basic Example

            

                

                    
Link
                    
Link
                    
Active 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="#">Active Link</a></li>
    <li class="nav-item" disabled><a href="#">Disabled</a></li>
</ul>
        

Justified (Right Aligned)

            

                

                    
Link
                    
Link
                    
Active 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="#">Active Link</a></li>
    <li class="nav-item" disabled><a href="#">Disabled</a></li>
</ul>
        

Vertical Navigation

            

                

                    
Link
                    
Link
                    
Active 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="#">Active Link</a></li>
    <li class="nav-item" disabled><a href="#">Disabled</a></li>
</ul>
        

Vertical Right Aligned

            

                

                    
Link
                    
Link
                    
Active 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="#">Active Link</a></li>
    <li class="nav-item" disabled><a href="#">Disabled</a></li>
</ul>
        

Disabled State

Add the disabled attribute to <li> to make a nav item non-interactive.

            

                

                    
Link
                    
Link
                    
Active 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="#">Active Link</a></li>
    <li class="nav-item" disabled><a href="#">Disabled</a></li>
</ul>
        

Available Classes

Class	Description
.nav	The main navigation container that controls direction and alignment of items.
.nav-item	Each menu item, which can be a link, button, or text.
.active	Highlights the active item.
.flex-column	Displays items in a vertical (column) layout.
.justify-content-end	Aligns items to the right.
.align-items-end	Vertically aligns items to the end of the container.

Layout Variations

The Nav component supports several layout variations:

• Horizontal (default): Items are displayed in a row.
• Vertical (flex-column): Items are stacked in a column.
• Right Aligned (justify-content-end): Items are aligned to the right.
• Active and Disabled: Use the active class for active items and disabled attribute for disabled items.

File Locations #

File	Path	Description
index.html	miz/themes/mizoon/components/nav/index.html	Example implementation and documentation
_index.scss	miz/themes/mizoon/components/nav/_index.scss	SCSS styles and variables
script.js	miz/themes/mizoon/components/nav/script.js	JavaScript functionality

SCSS Variables #

            

                
                
SCSS
                
            
            $nav-transition: all 150ms linear;
$nav-item-active: ".bg-primary-color, .on-primary-color";
$nav-item-custom-classes: ".p-1, .radius-all-small";
$nav-item-child-custom-classes: ".cursor-pointer, .text-color";
$nav-item-child-active-custom-classes: ".on-primary-color";
        

JavaScript Implementation #

Class Structure

Method/Property	Type	Description
navs	Property	NodeList of all nav elements
constructor()	Method	Initializes the nav component and sets up event listeners
init()	Method	Sets up nav items and adds events
setupNavItems(nav)	Method	Adds events to nav items and manages active/disabled state
setActiveItem(nav, item)	Method	Activates the selected item and deactivates others
disableItem(item)	Method	Disables a nav item
enableItem(item)	Method	Enables a nav item again

Implementation Example

            

                
                
JavaScript
                
            
            class Nav {
    constructor(selector = '.nav') {
        this.navs = document.querySelectorAll(selector);
        this.init();
    }

    init() {
        this.navs.forEach(nav => {
            this.setupNavItems(nav);
        });
    }

    setupNavItems(nav) {
        const items = nav.querySelectorAll('.nav-item');
        
        items.forEach(item => {
            if (!item.hasAttribute('disabled')) {
                item.addEventListener('click', (e) => {
                    if (!item.hasAttribute('disabled')) {
                        e.preventDefault();
                        this.setActiveItem(nav, item);
                    }
                });

                const elements = item.querySelectorAll('a, p, span, div');
                elements.forEach(element => {
                    element.addEventListener('click', (e) => {
                        if (!item.hasAttribute('disabled')) {
                            e.preventDefault();
                            e.stopPropagation();
                            this.setActiveItem(nav, item);
                        }
                    });
                });
            }
        });
    }

    setActiveItem(nav, targetItem) {
        const items = nav.querySelectorAll('.nav-item');
        
        items.forEach(item => {
            if (item === targetItem) {
                item.classList.add('active');
            } else {
                item.classList.remove('active');
            }
        });
    }

    disableItem(item) {
        if (item) {
            item.setAttribute('disabled', '');
            item.style.pointerEvents = 'none';
        }
    }

    enableItem(item) {
        if (item) {
            item.removeAttribute('disabled');
            item.style.pointerEvents = 'auto';
        }
    }
}

document.addEventListener('DOMContentLoaded', () => {
    window.nav = new Nav();
});