Pleasance Styleguide

Primary Navigation 

<div class="primary-navigation bg-secondary text-primary pt-2 px-3">
    <nav role="navigation">
        <ul class="menu list-unstyled">
            <li class="menu-item pb-2">
                <a class="btn btn-outline-primary d-block" href="#" title="About">About</a>
            </li>
            <li class="menu-item pb-2">
                <a class="btn btn-outline-primary d-block" href="#" title="Find us">Find us</a>
            </li>
            <li class="menu-item pb-2">
                <a class="btn btn-outline-primary d-block" href="#" title="How to book">How to book</a>
            </li>
            <li class="menu-item pb-2">
                <a class="btn btn-outline-primary d-block" href="#" title="Our bar">Our bar</a>
            </li>
            <li class="menu-item pb-2">
                <a class="btn btn-outline-primary d-block" href="#" title="Accessibility">Accessibility</a>
            </li>
            <li class="menu-item pb-2">
                <a class="btn btn-outline-primary d-block" href="#" title="Terms & conditions">Terms & conditions</a>
            </li>
            <li class="menu-item pb-2">
                <a class="btn btn-outline-primary d-block" href="#" title="FAQs">FAQs</a>
            </li>
        </ul>
    </nav>
</div>
 
<div class="primary-navigation bg-secondary text-primary pt-2 px-3">
  <nav role="navigation">
    <ul class="menu list-unstyled">
      {% for item in items %}
      <li class="menu-item pb-2">
        <a class="btn btn-outline-primary d-block" href="{{ item.url }}" title="{{ item.text }}">{{ item.text }}</a>
      </li>
      {% endfor %}
    </ul>
  </nav>
</div>
 
{
  "items": [
    {
      "text": "About",
      "url": "#"
    },
    {
      "text": "Find us",
      "url": "#"
    },
    {
      "text": "How to book",
      "url": "#"
    },
    {
      "text": "Our bar",
      "url": "#"
    },
    {
      "text": "Accessibility",
      "url": "#"
    },
    {
      "text": "Terms & conditions",
      "url": "#"
    },
    {
      "text": "FAQs",
      "url": "#"
    }
  ]
}

No notes defined.