NavButton

Minimal navigation button with transparent background and text-only hover effects, perfect for navigation menus and sidebars.

Live Demo

Home

About

Contact

With Icons

Home

Settings

Profile

Icon Only

States

Default

Active

Disabled

As a Link

Pass to for real navigation: the nav button gets a real href, so crawlers and "open in new tab" work, and internal paths go through the Vue router (no reload). active still controls the highlight and aria-current. While disabled the href is dropped and the link is marked aria-disabled.

Menu

About

Soon

<script setup lang="ts">
const route = useRoute();
</script>

<template>
  <nav>
    <orio-nav-button to="/menu" :active="route.path === '/menu'">Menu</orio-nav-button>
    <orio-nav-button to="/about" :active="route.path === '/about'">About</orio-nav-button>
  </nav>
</template>

Usage

Basic Navigation

<template>
  <nav>
    <orio-nav-button @click="goHome">Home</orio-nav-button>
    <orio-nav-button @click="goAbout">About</orio-nav-button>
    <orio-nav-button @click="goContact">Contact</orio-nav-button>
  </nav>
</template>

<script setup>
function goHome() {
  // Navigate to home
}

function goAbout() {
  // Navigate to about
}

function goContact() {
  // Navigate to contact
}
</script>

With Active State

<template>
  <nav>
    <orio-nav-button
      :active="currentRoute === '/'"
      @click="navigate('/')"
    >
      Home
    </orio-nav-button>
    <orio-nav-button
      :active="currentRoute === '/about'"
      @click="navigate('/about')"
    >
      About
    </orio-nav-button>
  </nav>
</template>

<script setup>
const currentRoute = ref('/')

function navigate(route) {
  currentRoute.value = route
  // Router navigation logic
}
</script>

With Icons

<!-- Icon before text -->
<orio-nav-button icon="home" @click="goHome">Home</orio-nav-button>

<!-- Icon only (automatically rounds to circle) -->
<orio-nav-button icon="settings" @click="goSettings" />

Sidebar Menu Example

<template>
  <aside class="sidebar">
    <orio-nav-button
      icon="dashboard"
      :active="isActive('dashboard')"
      @click="navigate('dashboard')"
    >
      Dashboard
    </orio-nav-button>
    <orio-nav-button
      icon="analytics"
      :active="isActive('analytics')"
      @click="navigate('analytics')"
    >
      Analytics
    </orio-nav-button>
    <orio-nav-button
      icon="settings"
      :active="isActive('settings')"
      @click="navigate('settings')"
    >
      Settings
    </orio-nav-button>
  </aside>
</template>

<script setup>
const route = useRoute()

function isActive(page) {
  return route.path === `/${page}`
}

function navigate(page) {
  navigateTo(`/${page}`)
}
</script>

<style scoped>
.sidebar {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
}
</style>

Props

Prop	Type	Default	Description
icon	string	undefined	Icon name from icon registry
disabled	boolean	false	Disables interaction: aria-disabled, no href, out of tab order
active	boolean	false	Indicates current/active page or section
to	RouteLocationRaw	undefined	Render as a real <a href> (router navigation for internal paths); ignored while disabled

Note: NavButton always renders a single <a>. Without to it is a role="button" anchor, so it never submits a form — use <orio-button> for that.

Events

Event	Payload	Description
click	PointerEvent	Emitted on button click (when not disabled)

Slots

Slot	Props	Description
default	-	Button text content
icon	-	Custom icon content

Styling

The NavButton uses these CSS variables:

--color-text          /* Default text color */
--color-accent        /* Hover and active state color */
--border-radius-md    /* Border radius */

Accessibility

• Keyboard Support: Enter and Space activate it when it has no to; with to, Enter follows the link natively
• Focus Visible: 2px outline appears on keyboard focus
• ARIA: role="button" without to, aria-disabled="true" when disabled, aria-current="page" when active is true
• Semantic HTML: One <a> element — a real link with to, a button-role anchor without

Use Cases

Navigation Menus

Perfect for main navigation bars where you need subtle, minimal buttons that don't compete with content.

Sidebar Navigation

Ideal for sidebar menus in dashboards and admin panels where you want to indicate the current section.

Tab-like Navigation

Works well as an alternative to traditional tabs when you want a more understated look.

Secondary Actions

Use for less prominent actions in toolbars or headers where primary buttons would be too heavy.

Design Notes

NavButton differs from the standard Button component:

• No background: Always transparent, never filled
• No border: Clean, minimal appearance
• Text-only hover: Only the text color changes on hover, not the background
• Active state: Built-in support for indicating the current page or section
• Single style: No variants - one focused design for navigation use cases

Use NavButton when you want minimal, text-focused navigation elements. Use the standard Button component for primary actions, forms, and other interactive elements that need more visual weight.