Menu

Menus display a list of choices on a temporary or permanent surfaces.



Markup

Menu's are used throughout Frontbx and can be optionally integrating into many components such as Cards, Dropdowns, Drawer, Backdrop and more.

Creating a basic menu is as simple as creating a list under the .menu class:

<ul class="menu"> 
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>

Menu items come with handy alignment content helpers .item-left, .item-right and .item-body helper to help delineate content:

Additionally, the .menu-divider and .menu-header can be used to layout content

<ul class="menu">
    <li class="menu-header">Menu</li>
    <li>
        <span class="item-left"><span class="fa fa-inbox color-gray-500"></span></span>
        <span class="item-body">Inbox</span>
        <span class="item-right"><span class="label">4</span></span>
    </li>
    ...
    <li class="menu-divider"></li>
</ul>

Dense menu

For larger menus with multiple items, you can use the .menu-dense modifier on .menu to reduce the padding and text size:

<ul class="menu menu-dense">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
</ul>

Adding the .menu-ellipsis modifier on .menu enables text overflow ellipsis. Ensure your text is nested inside .item-body for this to work:

<ul class="menu menu-ellipsis">
    <li>
        <div class="item-body">
            Officia cillum nisi ea velit
        </div>
    </li>
    <li>
        <div class="item-body">
            Lorem ipsum dolor anim commodo elit in consectetur tempor amet dolor quis dolore laborum proident irure in.
        </div>
    </li>
    <li>
        <div class="item-body">
            Minim velit laboris in aliquip.
        </div>
    </li>
</ul>

States

Menu items come with a handful of convenient states to help with different use-cases. Add the classes .active .selected or .disabled to a menu item to help provide context:

<ul class="menu">
    <li>Default</li>
    <li class="hover">hover</li>
    <li>Default</li>
    <li class="active">.active</li>
    <li>Default</li>
    <li class="selected">.selected</li>
</ul>

CSS Customization

Menu uses local CSS variables on .menu along with Sass variables for enhanced component customization and styling. The base values are used by the UI to create all the styling. Values for the CSS variables are set via Sass, so pre-compilation customization is still supported too.

.custom-menu
{
    --fbx-menu-bg: var(--fbx-black);
    --fbx-menu-color: var(--fbx-white);
    --fbx-menu-item-color-hover: var(--fbx-white);
    --fbx-menu-item-color-active: var(--fbx-theme-primary);
    --fbx-menu-item-color-selected: var(--fbx-theme-primary);
    --fbx-menu-item-bg-hover: var(--fbx-gray-900);
    --fbx-menu-item-bg-active: var(--fbx-gray-900);
    --fbx-menu-item-bg-selected: var(--fbx-gray-900);
    --fbx-menu-divider-color: var(--fbx-gray-600);
}

Default values are set in the scss/_config.scss file in Frontbx's source.

scss/_config.scss
$menu-bg:                       var(--fbx-white) !default;
$menu-color:                    var(--fbx-gray-700) !default;
$menu-font-size:                1.3rem !default;
$menu-font-weight:              $text-normal !default;
$menu-radius:                   var(--fbx-border-radius) !default;
$menu-container-padding:        3px !default;
$menu-item-bg:                  transparent !default;
$menu-item-color-hover:         var(--fbx-gray-700) !default;
$menu-item-color-active:        var(--fbx-theme-primary) !default;
$menu-item-color-checked:       var(--fbx-white) !default;
$menu-item-color-selected:      var(--fbx-white) !default;
$menu-item-bg-hover:            var(--fbx-theme-primary-100) !default;
$menu-item-bg-active:           var(--fbx-theme-primary-200) !default;
$menu-item-bg-selected:         var(--fbx-theme-primary) !default;
$menu-item-bg-checked:          var(--fbx-theme-primary) !default;
$menu-item-pad-y:               10px !default;
$menu-item-pad-x:               12px !default;
$menu-item-v-space:             2px !default;
$menu-divider-color:            var(--fbx-gray-200) !default;
$menu-divider-space:            5px;
.menu {
    --fbx-menu-bg: var(--fbx-white);
    --fbx-menu-color: var(--fbx-gray-700);
    --fbx-menu-container-padding: 3px;
    --fbx-menu-radius: var(--fbx-border-radius);
    --fbx-menu-font-size: 1.3rem;
    --fbx-menu-font-weight: 400;
    --fbx-menu-item-color-hover: var(--fbx-gray-700);
    --fbx-menu-item-color-active: var(--fbx-theme-primary);
    --fbx-menu-item-color-checked: var(--fbx-white);
    --fbx-menu-item-color-selected: var(--fbx-white);
    --fbx-menu-item-bg: transparent;
    --fbx-menu-item-bg-hover: var(--fbx-theme-primary-100);
    --fbx-menu-item-bg-checked: var(--fbx-theme-primary);
    --fbx-menu-item-bg-active: var(--fbx-theme-primary-200);
    --fbx-menu-item-bg-selected: var(--fbx-theme-primary);
    --fbx-menu-item-pad-y: 10px;
    --fbx-menu-item-pad-x: 12px;
    --fbx-menu-item-v-space: 2px;
    --fbx-menu-divider-color: var(--fbx-gray-200);
    --fbx-menu-divider-space: 5px;
}

JavaScript Instantiation

Menu can be instantiated via JavaScript to generate dynamic content on the fly. To create a Menu dynamically, use Frontbx's Component.Create method either via the frontbx.Dom or the Menu Component directly:

let options =
{
    dense: false,
    selectable: true,
    ellipsis: false,
    items:
    [
        'Option One',
        {
            left: '<span class="fa fa-sun"></span>',
            body: 'Option Two'
        },
        {
            left: '<span class="fa fa-sun"></span>',
            body: 'Option 3',
            right: '<span class="fa fa-user"></span>',
        }
    ]
};

let container = document.querySelector('.my-container');

// Via Frontbx dom
frontbx.Dom().create('Menu', options, container);

// Or via Component directly
frontbx.Dom().component('Menu').create(options, container);

Below are the available options:

Option Default Example Behavior
classes '' my-button Additional class name(s) on <ul> element.
dense false true Makes dense menu
ellipsis false true Enables menu item text overflow ellipsis
selectable false true Enables selectable items.
selected null option 2 Text or value of default selected item when selectable true
items [] ['option 1', 'option 2'] Array of menu items as text or objects with sub item properties
items.item.left null {left:<span class="fa fa-sun"></span>' Optional HTML string of optional menu item left
items.item.right null {right: '<span class="fa fa-user"></span>' Optional HTML string of optional menu item right
items.item.body null {right: 'Option 1' Optional HTML string or text of optional menu item body
items.item.state null {state: 'selected' Optional menu item state class