Pear

PNav & PNavItem

PNav gives you Pico-style nav lists. Use PNavItem for the list items around links, brand bits, and small actions.

Balanced Nav
vue
<p-nav>
  <template #left>
    <p-nav-item><strong>Pear</strong></p-nav-item>
  </template>

  <p-nav-item><a href="#" @click.prevent>Docs</a></p-nav-item>
  <p-nav-item><a href="#" @click.prevent>Components</a></p-nav-item>

  <template #right>
    <p-nav-item><p-button>Sign in</p-button></p-nav-item>
  </template>
</p-nav>
Simple List
vue
<p-nav>
  <p-nav-item><a href="#" @click.prevent>Overview</a></p-nav-item>
  <p-nav-item><a href="#" @click.prevent>Guides</a></p-nav-item>
  <p-nav-item><a href="#" @click.prevent>Reference</a></p-nav-item>
</p-nav>
API

PNav and PNavItem have no props or custom events.

Slots

NameTypeDefaultDescription
leftslot-Optional left-aligned list content.
defaultslot-Center/default list content.
rightslot-Optional right-aligned list content.
PNavItem defaultslot-Content rendered inside a native li.