Navigation | 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

Name	Type	Default	Description
`left`	`slot`	-	Optional left-aligned list content.
`default`	`slot`	-	Center/default list content.
`right`	`slot`	-	Optional right-aligned list content.
`PNavItem default`	`slot`	-	Content rendered inside a native li.