Nav Button Group

<pa-nav-button-group> | PaNavButtonGroup

A container component that groups navigation buttons together with mutual selection behavior. When a button is selected within the group, any previously selected button is deselected. Perfect for navigation menus where only one option should be active at a time.

<pa-nav-button-group>
  <pa-nav-button label="Home" icon="home-solid" />
  <pa-nav-button label="Settings" icon="cog-solid" />
  <pa-nav-button label="Profile" icon="user-solid" />
</pa-nav-button-group>

Examples

Basic Usage

<template>
  <pa-nav-button-group @update:selected="handleSelection">
    <pa-nav-button label="Home" icon="payadvantage-tick" />
    <pa-nav-button label="Settings" icon="cog-solid" />
    <pa-nav-button label="Profile" icon="user-solid" />
  </pa-nav-button-group>
</template>

<script setup>
const handleSelection = (selectedId) => {
  console.log('Selected button ID:', selectedId)
}
</script>

With Group Label

Navigation groups can include a descriptive label.

Payment Methods

<template>
  <pa-nav-button-group label="Payment Methods">
    <pa-nav-button 
      label="Bank Account" 
      icon="university-solid" 
      sub-label="Direct transfer" 
    />
    <pa-nav-button 
      label="Credit Card" 
      icon="credit-card-solid" 
      sub-label="Visa, MasterCard, Amex" 
    />
    <pa-nav-button 
      label="Digital Wallet" 
      icon="wallet-solid" 
      sub-label="PayPal, Apple Pay" 
    />
  </pa-nav-button-group>
</template>

Payment Method Selection

A practical example showing different payment options with action icons.

Choose Payment Method

<template>
  <pa-nav-button-group label="Choose Payment Method" @update:selected="handlePaymentSelection">
    <pa-nav-button 
      label="Bank Account" 
      icon="plus-solid" 
      icon-variant="light" 
      :show-action-arrow="false" 
      :action-icons="['university-solid']" 
    />
    <pa-nav-button 
      label="Credit Card" 
      sub-label="With Fraud Protection" 
      icon="plus-solid" 
      :action-icons="['cc-mastercard-brand', 'cc-visa-brand', 'cc-amex-brand']" 
    />
    <pa-nav-button 
      label="Digital Wallet" 
      action-label="for your online banking" 
      icon="plus-solid" 
    />
    <pa-nav-button 
      label="Cash Payment" 
      icon="plus-solid" 
      :show-actions="false" 
    />
  </pa-nav-button-group>
</template>

<script setup>
const handlePaymentSelection = (selectedId) => {
  console.log('Selected payment method:', selectedId)
  // Handle payment method selection logic
}
</script>

Disabled Group

Entire groups can be disabled to prevent any interaction.

Disabled Options

<template>
  <pa-nav-button-group label="Disabled Options" :disabled="true">
    <pa-nav-button 
      label="Option 1" 
      icon="circle-solid" 
      sub-label="Not available" 
    />
    <pa-nav-button 
      label="Option 2" 
      icon="circle-solid" 
      sub-label="Coming soon" 
    />
    <pa-nav-button 
      label="Option 3" 
      icon="circle-solid" 
      sub-label="Under maintenance" 
    />
  </pa-nav-button-group>
</template>

Navigation Menu

A typical navigation menu implementation.

Main Navigation

<template>
  <pa-nav-button-group label="Main Navigation" @update:selected="handleNavigation">
    <pa-nav-button 
      label="Dashboard" 
      icon="tachometer-alt-solid" 
      action-label="Overview and stats" 
    />
    <pa-nav-button 
      label="Transactions" 
      icon="receipt-solid" 
      sub-label="View all activity" 
    />
    <pa-nav-button 
      label="Reports" 
      icon="chart-line-solid" 
      action-label="Analytics and insights" 
    />
    <pa-nav-button 
      label="Settings" 
      icon="cog-solid" 
      :show-actions="false" 
    />
  </pa-nav-button-group>
</template>

<script setup>
const handleNavigation = (selectedId) => {
  console.log('Navigate to:', selectedId)
  // Handle navigation logic
}
</script>

Importing

import { PaNavButtonGroup } from '@payadvantage/ui_components'

Properties

Name	Description	Reflects	Type	Default
label	Group label displayed above the navigation buttons.	no	string	''
disabled	Whether all buttons in the group are disabled.	no	boolean	false

Events

Name	Description	Event Detail
update:selected	Emitted when a button in the group is selected.	Button ID (string)

Slots

Name	Description
(default)	Contains the navigation buttons to be grouped. Expected to contain pa-nav-button components.

Dependencies

• PaNavButton: Designed to contain pa-nav-button components
• Inherits icon dependencies from nested navigation buttons
• For available icons, see the PaIcon component documentation

Selection Behavior

The nav button group manages selection state automatically:

• Mutual exclusion: Only one button can be selected at a time
• Automatic deselection: Selecting a new button deselects the previous one
• Event emission: Emits update:selected with the button's unique ID
• Disabled inheritance: Group-level disabled state affects all buttons

Design Notes

The navigation button group component provides:

• Mutual selection: Radio button-style behavior for navigation options
• Group labeling: Optional descriptive label for the button group
• Consistent spacing: Uniform layout for grouped navigation buttons
• State management: Centralized selection state handling

Layout specifications:

• Optional h4-styled group label
• Vertical stacking of navigation buttons
• Maintains individual button styling and states
• Provides dependency injection for child buttons

This component is ideal for:

• Navigation menus: Main application navigation
• Settings panels: Option selection interfaces
• Payment methods: Financial service selection
• Multi-step forms: Step-by-step navigation
• Category selection: Content or service categories
• Dashboard sections: Area-specific navigation

Accessibility Notes

• Follows radio button group patterns for selection behavior
• Group labels provide context for screen readers
• Individual buttons maintain their accessibility features
• Keyboard navigation flows naturally through the group
• Selection states are clearly communicated visually

Related Components

• PaNavButton: Individual navigation button component
• PaActionButtonGroup: For non-exclusive action grouping