# Horizontal Menu

<div className="horizontal-app-menu">
    <div className="container">
        <div className={mobileSidebarToggle ? `menu-bar  header-sm-height open p-t-10` : `menu-bar  casual-menu header-sm-height p-t-10`} data-pages-init="horizontal-menu" data-hide-extra-li="4" >
            <a
                href="#"
                className="btn-link header-icon toggle-sidebar d-lg-none"
                data-toggle="horizontal-menu"
                onClick={() => setMobileSidebarToggle(false)}
            >
                <i className="pg-icon">close</i>
            </a>
            <ul>
                <li className="">
                    <a href="/casual/color">Color</a>
                </li>
                <li className="">
                    <a href="/casual/typography">Typography</a>
                </li>
                <li className="">
                    <a href="/casual/icons">Icons</a>
                </li>
                <li className="">
                    <a href="/casual/buttons">Buttons</a>
                </li>
                <li className="">
                    <a href="/casual/notifications">Notifications</a>
                </li>
                <li className="">
                    <a href="/casual/modals">Modals</a>
                </li>
                <li className="">
                    <a href="/casual/progress">Progress &amp; Activity</a>
                </li>
                <li className="">
                    <a href="/casual/tabs_accordian">Tabs &amp; Accordions</a>
                </li>
                <li className="">
                    <a href="/casual/sliders">Sliders</a>
                </li>
                <li className="">
                    <a href="/casual/tree_view">Tree View</a>
                </li>
                <li className="">
                    <a href="/casual/nestables">Nestable</a>
                </li>
            </ul>
        </div>
    </div>
</div>