primary navigation

Ready

HTML
View
Context
Assets
Info
Notes


        
        <div class="vgr-primary-navigation">
    <div class="vgr-container">
        <nav role="navigation">
            <ul class="vgr-unstyled-list vgr-clearfix">

                <li class="vgr-primary-navigation__item">
                    <a href="#" class="vgr-primary-navigation__link vgr-primary-navigation__link--js " aria-haspopup="true" aria-expanded="false" aria-hidden="true">Startsida</a>

                    <div class="sub-nav" role="group" aria-expanded="false" aria-hidden="true">
                        <ul class="sub-nav-group">

                            <li class="vgr-primary-navigation__item">
                                <a href="#" class="vgr-primary-navigation__link">Sub menu item</a>
                            </li>

                            <li class="vgr-primary-navigation__item">
                                <a href="#" class="vgr-primary-navigation__link">Sub menu item</a>
                            </li>

                            <li class="vgr-primary-navigation__item">
                                <a href="#" class="vgr-primary-navigation__link">Sub menu item</a>
                            </li>

                        </ul>
                    </div>

                </li>

                <li class="vgr-primary-navigation__item">
                    <a href="#" class="vgr-primary-navigation__link vgr-primary-navigation__link--js " aria-haspopup="true" aria-expanded="false" aria-hidden="true">Jobba i VGR</a>

                    <div class="sub-nav" role="group" aria-expanded="false" aria-hidden="true">
                        <ul class="sub-nav-group">

                            <li class="vgr-primary-navigation__item">
                                <a href="#" class="vgr-primary-navigation__link">Sub menu item</a>
                            </li>

                            <li class="vgr-primary-navigation__item">
                                <a href="#" class="vgr-primary-navigation__link">Sub menu item</a>
                            </li>

                            <li class="vgr-primary-navigation__item">
                                <a href="#" class="vgr-primary-navigation__link">Sub menu item</a>
                            </li>

                        </ul>
                    </div>

                </li>

                <li class="vgr-primary-navigation__item">
                    <a href="#" class="vgr-primary-navigation__link vgr-primary-navigation__link--js " data-selected aria-haspopup="true" aria-expanded="false" aria-hidden="true">Hälsa och vård</a>

                    <div class="sub-nav" role="group" aria-expanded="false" aria-hidden="true">
                        <ul class="sub-nav-group">

                            <li class="vgr-primary-navigation__item">
                                <a href="#" class="vgr-primary-navigation__link">Sub menu item</a>
                            </li>

                            <li class="vgr-primary-navigation__item">
                                <a href="#" class="vgr-primary-navigation__link">Sub menu item</a>
                            </li>

                            <li class="vgr-primary-navigation__item">
                                <a href="#" class="vgr-primary-navigation__link">Sub menu item</a>
                            </li>

                        </ul>
                    </div>

                </li>

                <li class="vgr-primary-navigation__item">
                    <a href="#" class="vgr-primary-navigation__link vgr-primary-navigation__link--js " aria-haspopup="true" aria-expanded="false" aria-hidden="true">Regional utveckling</a>

                    <div class="sub-nav" role="group" aria-expanded="false" aria-hidden="true">
                        <ul class="sub-nav-group">

                            <li class="vgr-primary-navigation__item">
                                <a href="#" class="vgr-primary-navigation__link">Sub menu item</a>
                            </li>

                            <li class="vgr-primary-navigation__item">
                                <a href="#" class="vgr-primary-navigation__link">Sub menu item</a>
                            </li>

                            <li class="vgr-primary-navigation__item">
                                <a href="#" class="vgr-primary-navigation__link">Sub menu item</a>
                            </li>

                        </ul>
                    </div>

                </li>

                <li class="vgr-primary-navigation__item">
                    <a href="#" class="vgr-primary-navigation__link vgr-primary-navigation__link--js open" aria-haspopup="true" aria-expanded="false" aria-hidden="true">Kollektivtrafik</a>

                    <div class="sub-nav" role="group" aria-expanded="false" aria-hidden="true">
                        <ul class="sub-nav-group">

                            <li class="vgr-primary-navigation__item">
                                <a href="#" class="vgr-primary-navigation__link">Sub menu item</a>
                            </li>

                            <li class="vgr-primary-navigation__item">
                                <a href="#" class="vgr-primary-navigation__link">Sub menu item</a>
                            </li>

                            <li class="vgr-primary-navigation__item">
                                <a href="#" class="vgr-primary-navigation__link">Sub menu item</a>
                            </li>

                        </ul>
                    </div>

                </li>

                <li class="vgr-primary-navigation__item">
                    <a href="#" class="vgr-primary-navigation__link vgr-primary-navigation__link--js " aria-haspopup="true" aria-expanded="false" aria-hidden="true">Politik</a>

                    <div class="sub-nav" role="group" aria-expanded="false" aria-hidden="true">
                        <ul class="sub-nav-group">

                            <li class="vgr-primary-navigation__item">
                                <a href="#" class="vgr-primary-navigation__link">Sub menu item</a>
                            </li>

                            <li class="vgr-primary-navigation__item">
                                <a href="#" class="vgr-primary-navigation__link">Sub menu item</a>
                            </li>

                            <li class="vgr-primary-navigation__item">
                                <a href="#" class="vgr-primary-navigation__link">Sub menu item</a>
                            </li>

                        </ul>
                    </div>

                </li>

                <li class="vgr-primary-navigation__item">
                    <a href="#" class="vgr-primary-navigation__link vgr-primary-navigation__link--js " aria-haspopup="true" aria-expanded="false" aria-hidden="true">Om VGR</a>

                    <div class="sub-nav" role="group" aria-expanded="false" aria-hidden="true">
                        <ul class="sub-nav-group">

                            <li class="vgr-primary-navigation__item">
                                <a href="#" class="vgr-primary-navigation__link">Sub menu item</a>
                            </li>

                            <li class="vgr-primary-navigation__item">
                                <a href="#" class="vgr-primary-navigation__link">Sub menu item</a>
                            </li>

                            <li class="vgr-primary-navigation__item">
                                <a href="#" class="vgr-primary-navigation__link">Sub menu item</a>
                            </li>

                        </ul>
                    </div>

                </li>

                <li class="vgr-primary-navigation__item">
                    <a href="#" class="vgr-primary-navigation__link vgr-primary-navigation__link--js " aria-haspopup="true" aria-expanded="false" aria-hidden="true">Aktuellt</a>

                    <div class="sub-nav" role="group" aria-expanded="false" aria-hidden="true">
                        <ul class="sub-nav-group">

                            <li class="vgr-primary-navigation__item">
                                <a href="#" class="vgr-primary-navigation__link">Sub menu item</a>
                            </li>

                            <li class="vgr-primary-navigation__item">
                                <a href="#" class="vgr-primary-navigation__link">Sub menu item</a>
                            </li>

                            <li class="vgr-primary-navigation__item">
                                <a href="#" class="vgr-primary-navigation__link">Sub menu item</a>
                            </li>

                        </ul>
                    </div>

                </li>

                <li class="vgr-primary-navigation__item">
                    <a href="#" class="vgr-primary-navigation__link vgr-primary-navigation__link--js " aria-haspopup="true" aria-expanded="false" aria-hidden="true">Kontakt</a>

                    <div class="sub-nav" role="group" aria-expanded="false" aria-hidden="true">
                        <ul class="sub-nav-group">

                            <li class="vgr-primary-navigation__item">
                                <a href="#" class="vgr-primary-navigation__link">Sub menu item</a>
                            </li>

                            <li class="vgr-primary-navigation__item">
                                <a href="#" class="vgr-primary-navigation__link">Sub menu item</a>
                            </li>

                            <li class="vgr-primary-navigation__item">
                                <a href="#" class="vgr-primary-navigation__link">Sub menu item</a>
                            </li>

                        </ul>
                    </div>

                </li>

            </ul>
        </nav>
    </div>
</div>


        <div class="vgr-primary-navigation">
  <div class="vgr-container">
    <nav role="navigation">
      <ul class="vgr-unstyled-list vgr-clearfix">
        {% for item in items %}
          <li class="vgr-primary-navigation__item">
            <a href="{{item.url}}" class="vgr-primary-navigation__link vgr-primary-navigation__link--js {{item.state}}" {{item.attr}} aria-haspopup="true" aria-expanded="false" aria-hidden="true">{{ item.text }}</a>
            {% if item.items%}
              <div class="sub-nav" role="group" aria-expanded="false" aria-hidden="true">
                <ul class="sub-nav-group">
                  {% for subitem in item.items %}
                    <li class="vgr-primary-navigation__item">
                      <a href="{{subitem.url}}" class="vgr-primary-navigation__link" {{subitem.attr}}>{{ subitem.text }}</a>
                    </li>
                  {% endfor %}
                </ul>
              </div>
            {% endif %}
          </li>
        {% endfor %}
      </ul>
    </nav>
  </div>
</div>


        
            
            {
  "items": [
    {
      "text": "Startsida",
      "url": "#",
      "attr": null,
      "state": null,
      "items": [
        {
          "text": "Sub menu item",
          "url": "#",
          "attr": null,
          "state": null
        },
        {
          "text": "Sub menu item",
          "url": "#",
          "attr": null,
          "state": null
        },
        {
          "text": "Sub menu item",
          "url": "#",
          "attr": null,
          "state": null
        }
      ]
    },
    {
      "text": "Jobba i VGR",
      "url": "#",
      "attr": null,
      "state": null,
      "items": [
        {
          "text": "Sub menu item",
          "url": "#",
          "attr": null,
          "state": null
        },
        {
          "text": "Sub menu item",
          "url": "#",
          "attr": null,
          "state": null
        },
        {
          "text": "Sub menu item",
          "url": "#",
          "attr": null,
          "state": null
        }
      ]
    },
    {
      "text": "Hälsa och vård",
      "url": "#",
      "attr": "data-selected",
      "state": null,
      "items": [
        {
          "text": "Sub menu item",
          "url": "#",
          "attr": null,
          "state": null
        },
        {
          "text": "Sub menu item",
          "url": "#",
          "attr": null,
          "state": null
        },
        {
          "text": "Sub menu item",
          "url": "#",
          "attr": null,
          "state": null
        }
      ]
    },
    {
      "text": "Regional utveckling",
      "url": "#",
      "attr": null,
      "state": null,
      "items": [
        {
          "text": "Sub menu item",
          "url": "#",
          "attr": null,
          "state": null
        },
        {
          "text": "Sub menu item",
          "url": "#",
          "attr": null,
          "state": null
        },
        {
          "text": "Sub menu item",
          "url": "#",
          "attr": null,
          "state": null
        }
      ]
    },
    {
      "text": "Kollektivtrafik",
      "url": "#",
      "attr": null,
      "state": "open",
      "items": [
        {
          "text": "Sub menu item",
          "url": "#",
          "attr": null,
          "state": null
        },
        {
          "text": "Sub menu item",
          "url": "#",
          "attr": null,
          "state": null
        },
        {
          "text": "Sub menu item",
          "url": "#",
          "attr": null,
          "state": null
        }
      ]
    },
    {
      "text": "Politik",
      "url": "#",
      "attr": null,
      "state": null,
      "items": [
        {
          "text": "Sub menu item",
          "url": "#",
          "attr": null,
          "state": null
        },
        {
          "text": "Sub menu item",
          "url": "#",
          "attr": null,
          "state": null
        },
        {
          "text": "Sub menu item",
          "url": "#",
          "attr": null,
          "state": null
        }
      ]
    },
    {
      "text": "Om VGR",
      "url": "#",
      "attr": null,
      "state": null,
      "items": [
        {
          "text": "Sub menu item",
          "url": "#",
          "attr": null,
          "state": null
        },
        {
          "text": "Sub menu item",
          "url": "#",
          "attr": null,
          "state": null
        },
        {
          "text": "Sub menu item",
          "url": "#",
          "attr": null,
          "state": null
        }
      ]
    },
    {
      "text": "Aktuellt",
      "url": "#",
      "attr": null,
      "state": null,
      "items": [
        {
          "text": "Sub menu item",
          "url": "#",
          "attr": null,
          "state": null
        },
        {
          "text": "Sub menu item",
          "url": "#",
          "attr": null,
          "state": null
        },
        {
          "text": "Sub menu item",
          "url": "#",
          "attr": null,
          "state": null
        }
      ]
    },
    {
      "text": "Kontakt",
      "url": "#",
      "attr": null,
      "state": null,
      "items": [
        {
          "text": "Sub menu item",
          "url": "#",
          "attr": null,
          "state": null
        },
        {
          "text": "Sub menu item",
          "url": "#",
          "attr": null,
          "state": null
        },
        {
          "text": "Sub menu item",
          "url": "#",
          "attr": null,
          "state": null
        }
      ]
    }
  ]
}

File:

Content:


                                .vgr-primary-navigation {

  $primary-navigation-text-color: $color-white;
  $primary-navigation-background-color: $theme-color-dark;


  background-color: $primary-navigation-background-color;
  color: $primary-navigation-text-color;

  ul { font-size: 0; }

  &__item {
    display: inline-block;
    list-style: none;
  }

  &__link {
    position: relative;
    display: inline-block;
    padding: 10px .85rem;
    color: $primary-navigation-text-color;
    text-decoration: none;
    transition: .15s ease-out;
    font-size: .9rem;

    &.open,
    &:hover,
    &:focus {
      background: $theme-color-darkest;
      color: $primary-navigation-text-color;
      box-shadow: inset 0 -4px 0 $primary-navigation-text-color;
    }
  }

  & [data-selected] {
    background: $theme-color-darkest;
    box-shadow: inset 0 -4px 0 #FF9400;
  }

  .sub-nav {
    position: absolute;
    display: none;
    border-top: none;
    background: #06304a;
    font-size: .9rem;
    z-index: 5;
    box-shadow: 2px 2px 15px rgba(0,0,0,.5);
    min-width: 10rem;
    max-width: 20rem;

    & ul {
      vertical-align: top;
      padding: 0;
    }

    & li {
      display: block;
      margin: 0;
      padding: 0;
      list-style: none;

      &:not(:last-child)>a {
        border-bottom: 1px solid #042132;
      }
    }

    & a {
      display: block;

      &:hover {
        box-shadow: none;
        text-decoration: underline;
        color: #FF9400;
      }
    }

    &.open { display: block; }
  }

  @media print {
    display: none;
  }
}

URL: /components/raw/primary-navigation/_primary-navigation.scss
Filesystem Path: components/navigations/primary-navigation/_primary-navigation.scss
Size: 1.5 KB

Handle: @primary-navigation
Preview:
- With layout
- Component only
Filesystem Path: components/navigations/primary-navigation/primary-navigation.html
Referenced by (2): @page, @header

There are no notes for this item.

primary navigation

Search

Search Card

Icons

General

Specific

Javascript

Logo

Extended Links