ناوبری
کد
<nav ui="navbar" aria-label="اصلی"><a ui="brand" href="#nav">Bana</a>
<ul><li><a href="#start" aria-current="page">خانه</a></li><li><a href="#palette">پالت</a></li><li><a href="#button">دکمه</a></li></ul>
<span ui="spacer"></span><button ui="primary small">ورود</button></nav>
کد
<div ui="sidebar-layout">
<nav ui="sidebar-nav" aria-label="بخشها"><h2>مدیریت</h2><ul>
<li><a href="#nav" aria-current="page"><bana-icon name="menu"></bana-icon> داشبورد</a></li>
<li><a href="#nav"><bana-icon name="edit"></bana-icon> محصولات</a></li>
<li><a href="#nav"><bana-icon name="upload"></bana-icon> بارگذاریها</a></li></ul></nav>
<div><nav ui="breadcrumb" aria-label="مسیر"><ol><li><a href="#nav">خانه</a></li><li><a href="#nav">محصولات</a></li><li aria-current="page">ویرایش</li></ol></nav></div>
</div>
- حساب
- پرداخت
- تأیید
کد
<div ui="stack">
<nav ui="pagination" aria-label="صفحهبندی"><ul>
<li><button aria-label="قبلی" disabled><bana-icon name="chevron-start"></bana-icon></button></li>
<li><a href="#nav" aria-current="page">۱</a></li><li><a href="#nav">۲</a></li><li><a href="#nav">۳</a></li>
<li><a href="#nav" aria-label="بعدی"><bana-icon name="chevron-end"></bana-icon></a></li></ul></nav>
<ol ui="stepper" aria-label="مراحل"><li data-complete>حساب</li><li aria-current="step">پرداخت</li><li>تأیید</li></ol>
</div>