BETA Hej! Denna webbplats är under utveckling. Bidra gärna med feedback!
Stilguide
Bidra

Huvudmeny 

<nav class="rh-navigation-bar" aria-label="Huvudmeny">
    <ul class="rh-navigation-bar__container" id="navbar" role="menubar" aria-label="Huvudmeny">
        <li class="rh-navigation-bar__item" role="none">
            <a class="rh-navigation-bar__link" role="menuitem" href="#">Räksmörgås</a>
        </li>
        <li class="rh-navigation-bar__item" role="none">
            <a class="rh-navigation-bar__link" role="menuitem" href="#">Smörgåsbord</a>
        </li>
        <li class="rh-navigation-bar__item" role="none">
            <a class="rh-navigation-bar__link" role="menuitem" href="#">Ombudsman</a>
        </li>
        <li class="rh-navigation-bar__item" role="none">
            <a class="rh-navigation-bar__link" role="menuitem" href="#">Löksås</a>
        </li>
        <li class="rh-navigation-bar__item" role="none">
            <a class="rh-navigation-bar__link" role="menuitem" href="#">Om färdväg</a>
        </li>
        <li class="rh-navigation-bar__item" role="none">
            <a class="rh-navigation-bar__link" role="menuitem" href="#">Rännil</a>
        </li>
    </ul>
</nav>
 
<nav class="rh-navigation-bar" aria-label="Huvudmeny">
    <ul class="rh-navigation-bar__container" id="navbar" role="menubar" aria-label="Huvudmeny">
        {{#each menuitems}}
        <li class="rh-navigation-bar__item" role="none">
            <a class="rh-navigation-bar__link" role="menuitem" href="#">{{this}}</a>
        </li>
        {{/each}}
    </ul>
</nav>
 
{
  "caption": "",
  "name": "",
  "menuitems": [
    "Räksmörgås",
    "Smörgåsbord",
    "Ombudsman",
    "Löksås",
    "Om färdväg",
    "Rännil"
  ]
}
  • Content: 
    .rh-navigation-bar {
    /* Box-modell/beteende */
    display: none;

    /* Visuellt */
    background: $NAVIGATION-BAR--BACKGROUND;

    /* Typografi */
    font-weight: $NAVIGATION-BAR--FONT-WEIGHT;

    &__container {
        padding-right: $NAVIGATION-BAR--PADDING-RIGHT;
        margin: auto;
        max-width: $page__container--max-width;
    }

    &__item {
        /* Box-modell/beteende */
        display: inline;

        /* Visuellt */ 
        padding-left: $NAVIGATION-BAR__ITEM--PADDING-LEFT;
        padding-right: $NAVIGATION-BAR__ITEM--PADDING-RIGHT;

        &:first-child {
            padding-lefT: 0;
        } 
    }

    &__link {
        /* Box-modell/beteende */
        display: inline-block;

        /* Visuellt */
        background: $NAVIGATION-BAR--BACKGROUND;
        border-bottom: $NAVIGATION-BAR__LINK--BORDER-BOTTOM;
        border-top: $NAVIGATION-BAR__LINK--BORDER-TOP;
        padding-bottom: $NAVIGATION-BAR__LINK--PADDING-BOTTOM;
        padding-left: $NAVIGATION-BAR__LINK--PADDING-LEFT;
        padding-right: $NAVIGATION-BAR__LINK--PADDING-RIGHT;
        padding-top: $NAVIGATION-BAR__LINK--PADDING-TOP;

        /* Typografi */
        color: $NAVIGATION-BAR__LINK--COLOR;
        text-decoration: none;

        &--active  {
            background: $NAVIGATION-BAR__LINK--ACTIVE--BACKGROUND;
            border-top: $NAVIGATION-BAR__LINK--ACTIVE--BORDER-TOP;
            border-bottom: $NAVIGATION-BAR__LINK--HIGHLIGHT--BORDER-BOTTOM;
            outline: $NAVIGATION-BAR__LINK--HIGHLIGHT--OUTLINE;

            &:first-child {
                padding-left: $NAVIGATION-BAR__LINK--PADDING-LEFT;
            }
        }

        &:active,
        &:focus,
        &:hover {
            /* Visuellt */
            border-bottom: $NAVIGATION-BAR__LINK--HIGHLIGHT--BORDER-BOTTOM;
            outline: $NAVIGATION-BAR__LINK--HIGHLIGHT--OUTLINE;
        }
    }

    @include small {
        display: block;
    }
}
  • URL: /components/raw/navigation-bar/_navigation-bar.scss
  • Filesystem Path: components/Molecules/navigation-bar/_navigation-bar.scss
  • Size: 2 KB
  • Content: 
    {
    "name": "regionhalland/navigation-bar",
    "description": "A horizontal navigation bar",
    "type": "styleguide-molecule",
    "license": "GPL-3.0",
    "authors": [
        {
            "name": "Viktor Sarge",
            "email": "viktor.sarge@regionhalland.se"
        }
    ],
    "require": {}
}
  • URL: /components/raw/navigation-bar/composer.json
  • Filesystem Path: components/Molecules/navigation-bar/composer.json
  • Size: 310 Bytes
  • Content: 
    $(".rh-navigation-bar__link").keydown(function() {
    switch (event.which) {
        case 39:
            if($(this).parent().next().length === 0) {
                $(this).parent().siblings().first().children().first().focus();
            } else {
                $(this).parent().next().children().first().focus();
            }
            break;
        case 37:
            if($(this).parent().prev().length === 0) {
                $(this).parent().siblings().last().children().first().focus();
            } else {
                $(this).parent().prev().children().first().focus();
            }
            break;
    }
});
  • URL: /components/raw/navigation-bar/navigation-bar.js
  • Filesystem Path: components/Molecules/navigation-bar/navigation-bar.js
  • Size: 635 Bytes
  • Content: 
    /* ****************************** */
/*   Molekylen "Navigation bar"   */
/* ****************************** */

// Grund-settings
$NAVIGATION-BAR--BACKGROUND: $base2-dark;
$NAVIGATION-BAR--PADDING-LEFT: $space-5;
$NAVIGATION-BAR--PADDING-RIGHT: $space-5;
$NAVIGATION-BAR--FONT-WEIGHT: bold;

// UL-elementen
$NAVIGATION-BAR__ITEM--PADDING-LEFT: $space-1;
$NAVIGATION-BAR__ITEM--PADDING-RIGHT: $space-1;

// Länkarna
$NAVIGATION-BAR__LINK--BORDER-BOTTOM: 4px solid $base2-dark;
$NAVIGATION-BAR__LINK--BORDER-TOP: 4px solid $base2-dark;
$NAVIGATION-BAR__LINK--PADDING-BOTTOM: $space-3;
$NAVIGATION-BAR__LINK--PADDING-TOP: $space-3;
$NAVIGATION-BAR__LINK--COLOR: $white;
$NAVIGATION-BAR__LINK--PADDING-LEFT: $space-2;
$NAVIGATION-BAR__LINK--PADDING-RIGHT: $space-2;

// Active, hover och focus-states för länkarna
$NAVIGATION-BAR__LINK--HIGHLIGHT--BORDER-BOTTOM: 4px solid $complementary2;
$NAVIGATION-BAR__LINK--HIGHLIGHT--OUTLINE: 0;
$NAVIGATION-BAR__LINK--ACTIVE--BORDER-TOP: 4px solid $base1-dark;
$NAVIGATION-BAR__LINK--ACTIVE--BACKGROUND: $base1-dark;
  • URL: /components/raw/navigation-bar/navigation-bar.settings.scss
  • Filesystem Path: components/Molecules/navigation-bar/navigation-bar.settings.scss
  • Size: 1.1 KB

Molekylen “Menu bar”

En horisontell huvudmeny

Versionshistorik

  • v1.0.0.20200203 Brytande ändringar - klassnamn. Menyn fyller nu 1440px och container 100%.
  • v1.0.0.20200129 Settings uppdaterade efter central ändring av spacing-variabler
  • v1.0.0.20200127 Första versionen publicerades