<ul class="inline-menu">
<li class="inline-menu__item">
<a class="inline-menu__link" href="#">
Menu Item 1
</a>
</li>
<li class="inline-menu__item">
<a class="inline-menu__link" href="#">
Menu Item 2
</a>
</li>
<li class="inline-menu__item">
<a class="inline-menu__link" href="#">
Menu Item 3
</a>
</li>
</ul>
<ul class="inline-menu">
{% for menu_item in items %}
<li class="inline-menu__item">
<a class="inline-menu__link" href="{{ menu_item.url }}">
{{ menu_item.title }}
</a>
</li>
{% endfor %}
</ul>
{
"items": [
{
"title": "Menu Item 1",
"url": "#"
},
{
"title": "Menu Item 2",
"url": "#"
},
{
"title": "Menu Item 3",
"url": "#"
}
]
}
.inline-menu {
@include reset-list-nav;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
background-color: $lehigh-brown;
&__item {
margin: 0 $space-one-half 0 0;
&::after {
content: "|";
color: $white;
padding: 0 0 0 $space-one-fourth;
}
&:last-child {
margin-right: 0;
&::after {
content: "";
padding: 0;
}
}
}
&__link {
color: $white;
text-decoration: none;
font-size: .75rem;
letter-spacing: 1.5px;
&:hover,
&:focus {
color: $white;
}
}
}
No notes defined.