Navigation

In this page, you will find how to add/update navigation menu items.

Vertical Layout Menu

you can easily update/add navigation menu items in Vertical Layout navigated in src/components/VerticalLayout/SidebarContent.js.

How to add Menu Title ?

Add following code in <ul> tag.

<li className="menu-title">{props.t("Menu Title")} </li>

How to add Single Menu Item ?

Add following code in <ul> tag.

<li>
    <Link to="/menu-item-path"
        <i className="icon classname"></i>
        <span>{props.t("menu-item-name")}</span>
    </Link>
</li>

How to add Nested Menu Item ?

Add following code in <ul> tag.

<li>
    <Link to="/menu-item-path" className="has-arrow"
        <i className="icon classname"></i>
        <span>{props.t("menu-item-name")}</span>
    </Link>

    // render menu item's children here
    <ul> className="sub-menu">
        <li>
            <Link to="/menu-item-path"
                <i className="icon classname"></i>
                <span>{props.t("menu-item-name")}</span>
            </Link>
        </li>
    </ul>

</li>

Horizontal Layout Menu

you can easily update/add navigation menu items in Vertical Layout navigated in src/components/HorizontalLayout/Navbar.js.

How to add Single Menu Item ?

Add following code in <ul> tag.

<li  className="nav-item dropdown">
    <Link to="/menu-item-path" className="nav-link dropdown-toggle arrow-none"
        <i className="icon classname"></i>
        {props.t("menu-item-name")}
    </Link>
</li>

How to add Nested Menu Item ?

Add following code in <ul> tag.

<li className="nav-item dropdown">
    <Link to="/menu-item-path" className="nav-link dropdown-toggle arrow-none"
        <i className="icon classname"></i>
        {props.t("menu-item-name")}
        <div className="arrow-down"></div>
    </Link>

    //render menu item's children here
    <div className="">
        <Link to="/menu-item-path" className="dropdown-item">
            {props.t("menu-item-name")}
        </Link>
    </div<
</li>