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>

Fluid

This makes the menu follow the parent element width.

Markup

<div pam-Menu="vertical fluid">
    <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>

Submenu

To enable a dropdowns use pam-Menu-Item and pam-Menu-Has-Children this can be used with verticaland 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

For a vertical submenu use the vertical menu with pam-Menu-Has-Children.

Home
Stuff
- Node
- JavaScript
- Angular
- React

Markup

<div pam-Menu="vertical inline">
    <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 two states active and disabled.

Markup

<div pam-Menu="horizontal">
    <ul pam-Menu-List>
        <li pam-Menu-Item="active">
            <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="">
    <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>

Divider

To add a menu divider use the pam-Menu-Divider attribute in a li element. It works the same for vertical menus.

Markup

<div pam-Menu="">
    <ul pam-Menu-List>
        <li pam-Menu-Item><a href="#" pam-Menu-Link>Home</a></li>
        <li pam-Menu-Divider></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-Divider></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-fluid .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-active-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-divider .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-divider

Variables

These are all the component specific variables that can be used for customization.

Name	Value
@menu-arrow-horizontal	`\25BE`
@menu-arrow-vertical	`\25B8`
@menu-bg	`transparent`
@menu-color	`@skin-gray-600`
@menu-disabled-opacity	`@opacity-60`
@menu-font-letter-spacing	`0.09em`
@menu-font-size	`@font-size-medium`
@menu-font-weight	`@font-weight-medium`
@menu-height	`@space-48`
@menu-line-height	`3rem`
@menu-heading-color	`@skin-black`
@menu-heading-font-weight	`@font-weight-medium`
@menu-heading-height	`@menu-height`
@menu-heading-padding	`@menu-link-padding`
@menu-divider-bg-color	`@skin-border-primary`
@menu-divider-margin	`0 @space-8`
@menu-divider-thickness	`1px`
@menu-vertical-divider-margin	`@space-8`
@menu-link-active-color	`@skin-black`
@menu-link-color	`@menu-color`
@menu-link-focus-bg-color	`fade(@skin-primary, 15)`
@menu-link-focus-color	`@skin-primary`
@menu-link-height	`@menu-height`
@menu-link-hover-bg-color	`fade(@skin-primary, 5)`
@menu-link-justify-content	`center`
@menu-link-line-height	`@menu-line-height`
@menu-link-padding	`0 @space-20`
@menu-children-bg-color	`@skin-background`
@menu-children-link-after-padding	`@space-8`
@menu-transition-duration	`@transition-duration-default`
@menu-transition-property	`background-color`
@menu-transition-timing	`linear`