Navigation patterns

<nav class="p-breadcrumb" aria-label="Breadcrumb trail">
<a href="index.html">
<svg class="icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<rect x="3" y="3" width="7" height="7" rx="2"/>
<rect x="14" y="3" width="7" height="7" rx="2"/>
<rect x="3" y="14" width="7" height="7" rx="2"/>
<rect x="14" y="14" width="7" height="7" rx="2"/>
</svg>
</a>
<svg class="icon directional" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="m9 5 7 7-7 7"/>
</svg>
<a href="pages/commerce/catalog.html">Product catalogue</a>
<svg class="icon directional" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="m9 5 7 7-7 7"/>
</svg>
<span aria-current="page">Product editor</span>
</nav>

<div data-premium-tabs>
<div class="p-segmented" role="tablist" aria-label="Tabs">
<button role="tab" id="p-tab-0" aria-controls="p-panel-0" aria-selected="true" aria-pressed="true" tabindex="0" data-premium-tab="0">Overview</button>
<button role="tab" id="p-tab-1" aria-controls="p-panel-1" aria-selected="false" aria-pressed="false" tabindex="-1" data-premium-tab="1">Activity</button>
<button role="tab" id="p-tab-2" aria-controls="p-panel-2" aria-selected="false" aria-pressed="false" tabindex="-1" data-premium-tab="2">Files</button>
</div>
<section class="p-tab-panel" role="tabpanel" id="p-panel-0" aria-labelledby="p-tab-0" >Everything you need to start building a thoughtful, consistent interface.</section>
<section class="p-tab-panel" role="tabpanel" id="p-panel-1" aria-labelledby="p-tab-1" hidden>Track meaningful changes and keep your team informed.</section>
<section class="p-tab-panel" role="tabpanel" id="p-panel-2" aria-labelledby="p-tab-2" hidden>Keep your project files organized and easy to find.</section>
</div>

<div class="p-segmented" role="group" aria-label="Reporting period">
<button data-premium-segment="month" aria-pressed="true">This month</button>
<button data-premium-segment="quarter" aria-pressed="false">This quarter</button>
<button data-premium-segment="year" aria-pressed="false">This year</button>
</div>
<p class="p-note" data-segment-output role="status">This month</p>

<nav aria-label="Pagination" class="flex wrap" data-pagination-example>
<button class="btn btn-primary btn-sm" data-example-page="1" aria-current="page">1</button>
<button class="btn btn-secondary btn-sm" data-example-page="2" >2</button>
<button class="btn btn-secondary btn-sm" data-example-page="3" >3</button>
<button class="btn btn-secondary btn-sm" data-example-page="4" >4</button>
<button class="btn btn-secondary btn-sm" data-example-page="5" >5</button>
</nav>
<p class="p-note" data-pagination-result role="status">Page 1 / 5</p>

<div class="p-checkout-steps">
<div class="is-active">
<b>1</b>Your workspace</div>
<div class="is-active">
<b>2</b>Your team</div>
<div class="">
<b>3</b>Review &amp; finish</div>
</div>
<a class="btn btn-primary" href="pages/system/onboarding.html">
<svg class="icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M5 12h14m-5-5 5 5-5 5"/>
</svg>Workspace onboarding</a>