{# Children: up to four <a class="ui-bottom-item" href aria-current="page"><svg class="ui-icon">…</svg>Label<span class="ui-bottom-count" aria-label="3 unread">3</span></a>, and optionally one central <a class="ui-bottom-action" href><span><svg class="ui-icon">…</svg></span>Label</a>. #}
<div style="width:375px;max-width:100%;border:1px solid var(--border);border-radius:24px;overflow:hidden">
<div style="height:96px"></div>
<.bottom_nav>
<a class="ui-bottom-item" href="#" aria-current="page"><svg class="ui-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><path d="M9 22V12h6v10"/></svg>Home</a>
<a class="ui-bottom-item" href="#"><svg class="ui-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M22 12h-6l-2 3h-4l-2-3H2"/><path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/></svg>Inbox<span class="ui-bottom-count" aria-label="3 unread">3</span></a>
<a class="ui-bottom-action" href="#"><span><svg class="ui-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14"/><path d="M12 5v14"/></svg></span>New</a>
<a class="ui-bottom-item" href="#"><svg class="ui-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/></svg>Projects</a>
<a class="ui-bottom-item" href="#"><svg class="ui-icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="8" r="4"/><path d="M20 21a8 8 0 0 0-16 0"/></svg>Account</a>
</.bottom_nav>
</div>