Menus

Menus are horizontal as default and take up 100% width. Use custom or preset modifiers to change the apperance and style of the menu.

Markup

<div pam-Menu>
    <ul pam-Menu-List>
        <li pam-Menu-Item><a href="#" pam-Menu-Link>Home sweet home</a></li>
        <li pam-Menu-Item><a href="#" pam-Menu-Link>Stuff</a></li>
        <li pam-Menu-Item><a href="#" pam-Menu-Link>About</a></li>
    </ul>
</div>

Vertical

Well, the name explains it.

Markup

<div pam-Menu="vertical">
    <ul pam-Menu-List>
        <li pam-Menu-Item><a href="#" pam-Menu-Link>Home sweet home</a></li>
        <li pam-Menu-Item><a href="#" pam-Menu-Link>Stuff</a></li>
        <li pam-Menu-Item><a href="#" pam-Menu-Link>About</a></li>
    </ul>
</div>

Truncated

Collapse the menu width to the widest menu item.

Markup

<div pam-Menu="vertical truncated">
    <ul pam-Menu-List>
        <li pam-Menu-Item><a href="#" pam-Menu-Link>Home sweet home</a></li>
        <li pam-Menu-Item><a href="#" pam-Menu-Link>Stuff</a></li>
        <li pam-Menu-Item><a href="#" pam-Menu-Link>About</a></li>
    </ul>
</div>

Fill

Extends the menu over the available width.

Markup

<div pam-Menu="fill">
    <ul pam-Menu-List>
        <li pam-Menu-Item><a href="#" pam-Menu-Link>Home sweet home</a></li>
        <li pam-Menu-Item><a href="#" pam-Menu-Link>Stuff</a></li>
        <li pam-Menu-Item><a href="#" pam-Menu-Link>About</a></li>
    </ul>
</div>

Justified

Extends the menu items of equal-width over the available width.

Markup

<div pam-Menu="justified">
    <ul pam-Menu-List>
        <li pam-Menu-Item><a href="#" pam-Menu-Link>Home sweet home</a></li>
        <li pam-Menu-Item><a href="#" pam-Menu-Link>Stuff</a></li>
        <li pam-Menu-Item><a href="#" pam-Menu-Link>About</a></li>
    </ul>
</div>

Scrollable

Limit the height of the menu and use the scrollable menu attribute. This creates a scrollable menu.

Markup

<div pam-Menu="scrollable" pam-Menu-Scrollable-Test>
    <ul pam-Menu-List>
        <li pam-Menu-Item><a href="#" pam-Menu-Link>Home</a></li>
        <li pam-Menu-Item><a href="#" pam-Menu-Link>JavaScript</a></li>
        <li pam-Menu-Item><a href="#" pam-Menu-Link>C++</a></li>
        <li pam-Menu-Item><a href="#" pam-Menu-Link>Dart</a></li>
        <li pam-Menu-Item><a href="#" pam-Menu-Link>Smalltalk</a></li>
        <li pam-Menu-Item><a href="#" pam-Menu-Link>Cobol</a></li>
    </ul>
</div>

Horizontal

To enable a scrollable horizontal menu, use the horizontal menu type with the scrollable attribute. When there isn't enough room, the menu items can be scrolled.

Markup

<div pam-Menu="horizontal scrollable">
    <ul pam-Menu-List>
        <li pam-Menu-Item><a href="#" pam-Menu-Link>Home</a></li>
        <li pam-Menu-Item><a href="#" pam-Menu-Link>JavaScript</a></li>
        <li pam-Menu-Item><a href="#" pam-Menu-Link>C++</a></li>
        <li pam-Menu-Item><a href="#" pam-Menu-Link>Dart</a></li>
        <li pam-Menu-Item><a href="#" pam-Menu-Link>Smalltalk</a></li>
        <li pam-Menu-Item><a href="#" pam-Menu-Link>Cobol</a></li>
    </ul>
</div>

Sub

To enable a dropdown use pam-Menu-Item and pam-Menu-Has-Children this can be used with limitedand horizontalmenu types.

Dropdown

By using the horizontal menu type, a dropdown sub menu can be created.

Home
Stuff
- Node
- JavaScript
- Angular
- React

Markup

<div pam-Menu="horizontal">
    <ul pam-Menu-List>
        <li pam-Menu-Item>
            <a href="#" pam-Menu-Link>Home</a>
        </li>
        <li pam-Menu-Item pam-Menu-Has-Children pam-Menu-Allow-Hover>
            <a href="#" pam-Menu-Link>Stuff</a>
            <ul pam-Menu-Children>
                <li pam-Menu-Item><a pam-Menu-Link href="#">Node</a></li>
                <li pam-Menu-Item><a pam-Menu-Link href="#">JavaScript</a></li>
                <li pam-Menu-Item><a pam-Menu-Link href="#">Angular</a></li>
                <li pam-Menu-Item><a pam-Menu-Link href="#">React</a></li>
            </ul>
        </li>
    </ul>
</div>

Vertical

A vertical submenu is enabled with the truncated menu type and pam-Menu-Has-Children attribute.

Home
Stuff
- Node
- JavaScript
- Angular
- React

Markup

<div pam-Menu="vertical truncated">
    <ul pam-Menu-List>
        <li pam-Menu-Item>
            <a href="#" pam-Menu-Link>Home</a>
        </li>
        <li pam-Menu-Item pam-Menu-Has-Children pam-Menu-Allow-Hover>
            <a href="#" pam-Menu-Link>Stuff</a>
            <ul pam-Menu-Children>
                <li pam-Menu-Item><a pam-Menu-Link href="#">Node</a></li>
                <li pam-Menu-Item><a pam-Menu-Link href="#">JavaScript</a></li>
                <li pam-Menu-Item><a pam-Menu-Link href="#">Angular</a></li>
                <li pam-Menu-Item><a pam-Menu-Link href="#">React</a></li>
            </ul>
        </li>
    </ul>
</div>

States

pam-Menu-Item has states active, selected and disabled to adjust menu items to different contexts.

Markup

<div pam-Menu="horizontal">
    <ul pam-Menu-List>
        <li pam-Menu-Item="selected">
            <a href="#" pam-Menu-Link>Home</a>
        </li>
        <li pam-Menu-Item>
            <a href="#" pam-Menu-Link>About</a>
        </li>
        <li pam-Menu-Item="disabled">
            <a href="#" pam-Menu-Link>Stuff</a>
        </li>
    </ul>
</div>

Heading

pam-Menu-Heading is used to add a heading to menus.

Menu title

Home
About

Markup

<div pam-Menu="vertical">
    <a href="#" pam-Menu-Heading>Menu title</a>
    <ul pam-Menu-List>
        <li pam-Menu-Item><a href="#" pam-Menu-Link>Home</a></li>
        <li pam-Menu-Item><a href="#" pam-Menu-Link>About</a></li>
    </ul>
</div>

Separator

To add a menu separator use the pam-Menu-Separator attribute in a li element. It works the same for horizontal menus.

Markup

<div pam-Menu="vertical truncated">
    <ul pam-Menu-List>
        <li pam-Menu-Item><a href="#" pam-Menu-Link>Home</a></li>
        <li pam-Menu-Separator></li>
        <li pam-Menu-Item><a href="#" pam-Menu-Link>JavaScript</a></li>
        <li pam-Menu-Item><a href="#" pam-Menu-Link>C++</a></li>
        <li pam-Menu-Separator></li>
        <li pam-Menu-Item><a href="#" pam-Menu-Link>Smalltalk</a></li>
        <li pam-Menu-Item><a href="#" pam-Menu-Link>Cobol</a></li>
    </ul>
</div>

.hook-menu .hook-menu-active-children .hook-menu-children .hook-menu-fill .hook-menu-fill-item .hook-menu-fill-list .hook-menu-fixed .hook-menu-has-children-link-after .hook-menu-heading .hook-menu-horizontal-scrollable .hook-menu-horizontal-scrollable-list .hook-menu-item .hook-menu-item-active-link .hook-menu-item-disabled .hook-menu-item-disabled-link .hook-menu-item-selected-link .hook-menu-justified .hook-menu-justified-item .hook-menu-justified-list .hook-menu-link .hook-menu-list .hook-menu-scrollable .hook-menu-scrollable-list .hook-menu-separator .hook-menu-truncated .hook-menu-vertical .hook-menu-vertical-children .hook-menu-vertical-has-children-link-after .hook-menu-vertical-item .hook-menu-vertical-list .hook-menu-vertical-separator