@fylgja/menu

    1.1.2 • Public • Published

    Fylgja - Menu

    NPM version license

    The menu component makes it easy to build common navigation patterns, like a navbar or menu in a dropdown.

    Installation

    npm install @fylgja/menu

    Then include the component in to your code via;

    @use "@fylgja/menu";
    // Or via PostCSS import
    @import "@fylgja/menu";

    How to use

    The most simple usecase is just using the .menu class as wrapper, around a set of links.

    <nav class="menu">
        <a href="#">..<a>
        <a href="#">..<a>
    </nav>

    Or as a list.

    <nav>
        <ul class="menu">
            <li><a href="#">..<a></li>
            <li><a href="#">..<a></li>
        </ul>
    </nav>

    By default the menu is column based, like a normal list.

    Using the modifier -row the menu items can be placed in a row layout.

    Menu items

    The menu class will style all links automatically,

    but only if links are a child of the menu class or a direct child of list item.

    If you want to use a wrapper, then use the class .menu-item, to add the same logic and styles as the auto menu item version.

    <nav>
        <div class="menu">
            <a href="#">..<a> <!-- Menu item -->
            <div><a href="#">..<a></div> <!-- Not a Menu item -->
            <div><a class="menu-item" href="#">..<a></div> <!-- Menu item -->
        </div>
        <ul class="menu">
            <li><a href="#">..<a></li> <!-- Menu item -->
            <li><div><a href="#">..<a></div</li> <!-- Not a Menu item -->
        </ul>
    </nav>

    Menu label

    If you want a heading for your menu items you can use the .menu-label class.

    To add an item styled as the .menu-item class, without all the hover, focus and active states.

    <nav>
        <ul class="menu">
            <li><div class="menu-label">Topic</div></li>
            <ul>
                <li><a href="#">..<a></li>
                <li><a href="#">..<a></li>
            </ul>
        </ul>
    </nav>

    Menu divider

    The menu divider is not part of this component, since it is not specifically for the menu.

    You need the use .hr class from the component @fylgja/base,

    combine it with the correct markup and you have a menu divider.

    <nav>
        <ul class="menu">
            <li><a href="#">..<a></li>
            <li class="hr" role="separator"></li>
            <li><a href="#">..<a></li>
        </ul>
    </nav>

    Config

    As with almost all of our components, CSS variables can be configured to add your own look/style.

    Want direct control on the base styles, here are the following SCSS variables can you modify.

    $enable-menu-row: true !default;
    $enable-menu-nested: true !default;
    
    $menu-nested-indent: 1em !default;
    
    $menu-item-active-selector: ".is-active" !default;
    $menu-item-auto-selector: "a:not([class*=btn])" !default;
    
    $menu-label-weight: bolder !default;
    
    $menu-item-padding: 0.4375rem 1em !default;
    $menu-item-radius: 4px !default;
    $menu-item-border: 0 !default;
    $menu-item-bg: transparent !default;
    $menu-item-color: inherit !default;
    
    $menu-item-outline: 0 !default;
    
    $menu-item-focus-stroke: 0 !default;
    $menu-item-focus-bg: change-color($root-fg, $alpha: 0.05) !default;
    $menu-item-focus-color: inherit !default;
    
    $menu-item-active-stroke: 0 !default;
    $menu-item-active-bg: var(--color-theme-fade, #{$color-theme-fade}) !default;
    $menu-item-active-color: inherit !default;

    Install

    npm i @fylgja/menu

    Homepage

    fylgja.dev/

    DownloadsWeekly Downloads

    16

    Version

    1.1.2

    License

    MIT

    Unpacked Size

    10.4 kB

    Total Files

    7

    Last publish

    Collaborators

    • grimlink