Pattern library

App bar

View full screen

Details

Source (Nunjucks)

<nav class="app-bar" aria-label="breadcrumbs">
<ul class="app-bar__list">
<li class="app-bar__item">
<a href="/"
>
<svg
viewBox="0 0 125 28.5"
xmlns="http://www.w3.org/2000/svg"
aria-label="web.dev"
role="img"
class="course-app-bar__logo"
enable-background="new 0 0 125 28.5"
>

<path
d="M24 17.3h-8.9c-.1 0-.3 0-.4.1L8 22.7c-.1.1-.1.2 0 .3 0 .1.1.1.2.1h15.9c1.6 0 3-1.4 2.9-3.1-.1-1.6-1.5-2.7-3-2.7"
fill="#00c9db"
clip-rule="evenodd"
fill-rule="evenodd"
>
</path>
<g transform="translate(.639 .717)">
<defs>
<filter
filterUnits="userSpaceOnUse"
height="22.3"
id="a_ef"
width="16.1"
x="0"
y=".1"
>

<feColorMatrix
values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"
>
</feColorMatrix>
</filter>
</defs>
<mask
height="22.3"
id="b_ef"
maskUnits="userSpaceOnUse"
width="16.1"
x="0"
y=".1"
>

<path
d="M0 .1h16.1v22.3H0V.1z"
fill="#fff"
clip-rule="evenodd"
fill-rule="evenodd"
filter="url(#a_ef)"
>
</path>
</mask>
<path
d="M16.1 11c-.1-.8-.5-1.6-1.1-2.1L4.7.7c-1.3-1-3.1-.8-4.1.5-1 1.3-.8 3.1.5 4.1l7.5 6-7.5 6c-1.3 1-1.5 2.8-.5 4.1 1 1.3 2.8 1.5 4.1.5L15 13.5c.7-.6 1.1-1.4 1.1-2.3V11"
fill="#0d55ff"
clip-rule="evenodd"
fill-rule="evenodd"
mask="url(#b_ef)"
>
</path>
</g>
<path
d="M27 20.2c0 1.6-1.3 2.9-2.9 2.9-1.6 0-2.9-1.3-2.9-2.9 0-1.6 1.3-2.9 2.9-2.9 1.6 0 2.9 1.3 2.9 2.9"
fill="#7000f2"
clip-rule="evenodd"
fill-rule="evenodd"
>
</path>
<path
d="M119.6 20.1h-2.2l-4.8-11.9h2.4l3.5 9.2 3.5-9.2h2.4l-4.8 11.9zm-16.8-7.3h6.8c-.1-1.6-1.4-2.9-3.4-2.9-1.7 0-3 1.1-3.4 2.9zm3.6 7.7c-3.5 0-6-2.7-6-6.3 0-3.6 2.5-6.3 5.9-6.3 3.5 0 5.8 2.4 5.8 6.5v.2h-9.3c.1 2.3 1.8 3.9 3.8 3.9 1.4 0 2.6-.7 3.3-2.1l2 1c-1.1 1.9-3.1 3.1-5.5 3.1zm-14 0c-3.1 0-5.7-2.8-5.7-6.3s2.6-6.3 5.7-6.3c1.7 0 3.3.8 4.1 2h.1l-.1-1.6V2.8h2.2v17.3h-2.1v-1.6h-.1c-.9 1.2-2.4 2-4.1 2zm.3-2c2.2 0 3.8-1.7 3.8-4.3 0-2.5-1.6-4.3-3.8-4.3-2.1 0-3.8 1.8-3.8 4.3s1.7 4.3 3.8 4.3zm-6.8.1c0 .9-.7 1.6-1.7 1.6-.9 0-1.7-.8-1.7-1.6 0-.9.8-1.6 1.7-1.6 1 0 1.7.7 1.7 1.6zm-10.5-.1c2.1 0 3.8-1.8 3.8-4.3s-1.7-4.3-3.8-4.3c-2.2 0-3.8 1.8-3.8 4.3s1.6 4.3 3.8 4.3zm.4 2c-1.7 0-3.3-.8-4.1-2h-.1v1.6h-2.1V2.8h2.2v5.5l-.1 1.6h.1c.8-1.2 2.3-2 4.1-2 3.1 0 5.7 2.8 5.7 6.3-.1 3.5-2.6 6.3-5.7 6.3zm-17.4-7.7h6.8c-.1-1.6-1.4-2.9-3.4-2.9-1.7 0-3 1.1-3.4 2.9zm3.6 7.7c-3.5 0-6-2.7-6-6.3 0-3.6 2.5-6.3 5.9-6.3 3.5 0 5.8 2.4 5.8 6.5v.2h-9.3c.1 2.3 1.8 3.9 3.8 3.9 1.4 0 2.5-.7 3.3-2.1l2 1c-1.1 1.9-3.1 3.1-5.5 3.1zM55.7 8.3l-3.8 11.9h-2.3l-3-9.1-2.9 9.1h-2.3L37.5 8.3h2.3l2.6 9 2.9-9h2.3l2.9 9 2.6-9h2.6z"
fill="#5f6368"
clip-rule="evenodd"
fill-rule="evenodd"
>
</path></svg
>
</a>
</li>
{% for item in data.items %}
<li class="app-bar__item">
<a href="{{ item.url }}">{{ item.text }}</a>
</li>
{% endfor %}
</ul>
</nav>

Output

<nav class="app-bar" aria-label="breadcrumbs">
<ul class="app-bar__list">
<li class="app-bar__item">
<a href="/"
>
<svg
viewBox="0 0 125 28.5"
xmlns="http://www.w3.org/2000/svg"
aria-label="web.dev"
role="img"
class="course-app-bar__logo"
enable-background="new 0 0 125 28.5"
>

<path
d="M24 17.3h-8.9c-.1 0-.3 0-.4.1L8 22.7c-.1.1-.1.2 0 .3 0 .1.1.1.2.1h15.9c1.6 0 3-1.4 2.9-3.1-.1-1.6-1.5-2.7-3-2.7"
fill="#00c9db"
clip-rule="evenodd"
fill-rule="evenodd"
>
</path>
<g transform="translate(.639 .717)">
<defs>
<filter
filterUnits="userSpaceOnUse"
height="22.3"
id="a_ef"
width="16.1"
x="0"
y=".1"
>

<feColorMatrix
values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"
>
</feColorMatrix>
</filter>
</defs>
<mask
height="22.3"
id="b_ef"
maskUnits="userSpaceOnUse"
width="16.1"
x="0"
y=".1"
>

<path
d="M0 .1h16.1v22.3H0V.1z"
fill="#fff"
clip-rule="evenodd"
fill-rule="evenodd"
filter="url(#a_ef)"
>
</path>
</mask>
<path
d="M16.1 11c-.1-.8-.5-1.6-1.1-2.1L4.7.7c-1.3-1-3.1-.8-4.1.5-1 1.3-.8 3.1.5 4.1l7.5 6-7.5 6c-1.3 1-1.5 2.8-.5 4.1 1 1.3 2.8 1.5 4.1.5L15 13.5c.7-.6 1.1-1.4 1.1-2.3V11"
fill="#0d55ff"
clip-rule="evenodd"
fill-rule="evenodd"
mask="url(#b_ef)"
>
</path>
</g>
<path
d="M27 20.2c0 1.6-1.3 2.9-2.9 2.9-1.6 0-2.9-1.3-2.9-2.9 0-1.6 1.3-2.9 2.9-2.9 1.6 0 2.9 1.3 2.9 2.9"
fill="#7000f2"
clip-rule="evenodd"
fill-rule="evenodd"
>
</path>
<path
d="M119.6 20.1h-2.2l-4.8-11.9h2.4l3.5 9.2 3.5-9.2h2.4l-4.8 11.9zm-16.8-7.3h6.8c-.1-1.6-1.4-2.9-3.4-2.9-1.7 0-3 1.1-3.4 2.9zm3.6 7.7c-3.5 0-6-2.7-6-6.3 0-3.6 2.5-6.3 5.9-6.3 3.5 0 5.8 2.4 5.8 6.5v.2h-9.3c.1 2.3 1.8 3.9 3.8 3.9 1.4 0 2.6-.7 3.3-2.1l2 1c-1.1 1.9-3.1 3.1-5.5 3.1zm-14 0c-3.1 0-5.7-2.8-5.7-6.3s2.6-6.3 5.7-6.3c1.7 0 3.3.8 4.1 2h.1l-.1-1.6V2.8h2.2v17.3h-2.1v-1.6h-.1c-.9 1.2-2.4 2-4.1 2zm.3-2c2.2 0 3.8-1.7 3.8-4.3 0-2.5-1.6-4.3-3.8-4.3-2.1 0-3.8 1.8-3.8 4.3s1.7 4.3 3.8 4.3zm-6.8.1c0 .9-.7 1.6-1.7 1.6-.9 0-1.7-.8-1.7-1.6 0-.9.8-1.6 1.7-1.6 1 0 1.7.7 1.7 1.6zm-10.5-.1c2.1 0 3.8-1.8 3.8-4.3s-1.7-4.3-3.8-4.3c-2.2 0-3.8 1.8-3.8 4.3s1.6 4.3 3.8 4.3zm.4 2c-1.7 0-3.3-.8-4.1-2h-.1v1.6h-2.1V2.8h2.2v5.5l-.1 1.6h.1c.8-1.2 2.3-2 4.1-2 3.1 0 5.7 2.8 5.7 6.3-.1 3.5-2.6 6.3-5.7 6.3zm-17.4-7.7h6.8c-.1-1.6-1.4-2.9-3.4-2.9-1.7 0-3 1.1-3.4 2.9zm3.6 7.7c-3.5 0-6-2.7-6-6.3 0-3.6 2.5-6.3 5.9-6.3 3.5 0 5.8 2.4 5.8 6.5v.2h-9.3c.1 2.3 1.8 3.9 3.8 3.9 1.4 0 2.5-.7 3.3-2.1l2 1c-1.1 1.9-3.1 3.1-5.5 3.1zM55.7 8.3l-3.8 11.9h-2.3l-3-9.1-2.9 9.1h-2.3L37.5 8.3h2.3l2.6 9 2.9-9h2.3l2.9 9 2.6-9h2.6z"
fill="#5f6368"
clip-rule="evenodd"
fill-rule="evenodd"
>
</path></svg
>
</a>
</li>

<li class="app-bar__item">
<a href="#">Lorem ipsum</a>
</li>

<li class="app-bar__item">
<a href="#">Dolor sit amet</a>
</li>

</ul>
</nav>