Menu Item | sashimi UI

.menu-item makes elements look like a menu item.

Applicable Elements

a
button

Basic Usage

Anchor

<ul class="card" style="width: fit-content;">
  <li><a class="menu-item" href="#basic-usage">Anchor</a></li>
  <li><button class="menu-item">Copy URL</button></li>
  <li><button class="menu-item">Sign out</button></li>
</ul>

Variants

.menu-item has .active variant.

Button
Link
Menu Item

<ul class="card" style="width: fit-content;">
  <li><a class="menu-item" href="#variants">Button</a></li>
  <li><a class="menu-item" href="#variants">Link</a></li>
  <li><a class="menu-item active" href="#variants">Menu Item</a></li>
</ul>

Combination

.icon sits well with .menu-item.

<ul class="card" style="width: fit-content; list-style: none;">
  <li><a class="menu-item" href="#combination"><img class="icon" src="/sign_in.svg#root" />Sign in</a></li>
  <li><button class="menu-item"><img class="icon" src="/share.svg#root" />Share with friends</button></li>
</ul>