Scroll X Navbar Component

A component that renders a horizontal navigation bar that supports scrolling both through dragging and through navigation buttons. The elements inside the navigation bar are injected via a slot, allowing for greater flexibility in the content that can be inserted.

Componente che visualizza una barra di navigazione orizzontale che supporta lo scorrimento sia tramite trascinamento che tramite pulsanti di navigazione. Gli elementi all'interno della barra di navigazione sono inniettati tramite uno slot, permettendo una maggiore flessibilità nel contenuto che può essere inserito.

API Reference

Slots

| Name | Description | |:------------|:-----------------------------------------------------------------------------------------------------------------------------------------------| | prev-icon | Slot for the icon prev used if the prop data-navigation is passed with value true. If the slot is leaved empty a default icon is used instead. | | next-icon | Slot for the icon next used if the prop data-navigation is passed with value true. If the slot is leaved empty a default icon is used instead. | | default | Required. Slot for contents. Pass a list of <li> inside here. |

Props

| Name | Type | Description | |:------------------------------------------------------|:----------|:-----------------------------------------------------------------------------------------------------------------------| | data-active-tab-id | string | Required Id of the active tab. | | data-is-nav | boolean | If is true tag is used to wrap the navigation, you should set this to true if your tabs are link or router-link. | | data-navigation-buttons-enabled | boolean | Enable/disable navigation through prev and next buttons. | | data-navigation-buttons-always-visible-when-enabled | boolean | Show navigation buttons also when they have attr disabled set to true. | | data-toolbar-aria-label | string | Aria label of the toolbar wrapper of the navigations prev/next buttons. | | data-slot-ready | boolean | Needed only in case of async data slotted in the default slot; indicates that the content passed are fully loaded. | | data-ul-role | string | Pass a role to the <ul> for accessibility reasons. | | data-is-scroll-events-threshold | number | A value in px that is needed to emit early the is-scroll events. |

Emits

| Name | Type | Description | |:-------------------|:----------|:-----------------------------------------------------------| | navigation | string | The new active tab id value. | | is-overflow-x | boolean | Is true when the content of the <ul> is overflowing. | | is-scroll-left | boolean | Is true if the scrollLeft of the <ul> is > 0. | | is-scroll-at-end | boolean | Is true if the scrolling of the <ul> has reached is end. |

CSS variables

| Name | default | Description | |:-------------------------------------------------|:----------|:-----------------------------------------------------------------------------------------------| | --scroll-x-navbar-width | 100% | <nav> width | | --scroll-x-navbar-max-width | none | <nav> max-width | | --scroll-x-navbar-spacing-x | | Lateral padding of the navigation bar | | --scroll-x-navbar-toolbar-top | 50% | Distance from the top of the navigation buttons | | --scroll-x-navbar-toolbar-translate-y | -50% | Value of translate-y of the navigation buttons | | --scroll-x-navbar-button-spacing-x | 0px | Lateral distance of the navigation buttons | | --scroll-x-navbar-button-width | | Width of the navigation buttons | | --scroll-x-navbar-button-height | | Height of the navigation buttons | | --scroll-x-navbar-button-border-width | | Border width of the navigation buttons | | --scroll-x-navbar-button-border-style | | Border style of the navigation buttons | | --scroll-x-navbar-button-border-color | | Border color of the navigation buttons | | --scroll-x-navbar-button-border-radius | | Border radius of the navigation buttons | | --scroll-x-navbar-button-bg-color | | Background-color of the navigation buttons | | --scroll-x-navbar-button-box-shadow | | Box shadow of the navigation buttons | | --scroll-x-navbar-button-color | | Color of the navigation buttons | | --scroll-x-navbar-button-icon-width | 1em | Width of the icon inside the navigation buttons | | --scroll-x-navbar-button-icon-height | 1em | Height of the icon inside the navigation buttons | | --scroll-x-navbar-button-icon-font-size | 1rem | Height of the icon inside the navigation buttons | | --scroll-x-navbar-button-disabled-border-width | | Border width of the navigation buttons when is disabled | | --scroll-x-navbar-button-disabled-border-style | | Border style of the navigation buttons when is disabled | | --scroll-x-navbar-button-disabled-border-color | | Border color of the navigation buttons when is disabled | | --scroll-x-navbar-button-disabled-bg-color | | Background-color of the navigation buttons when is disabled | | --scroll-x-navbar-button-disabled-box-shadow | | Box shadow of the navigation buttons when is disabled | | --scroll-x-navbar-button-disabled-color | | Color of the navigation buttons when is disabled | | --scroll-x-navbar-border-bottom-spacing-x | | Lateral distance of the navigation bar border bottom | | --scroll-x-navbar-border-bottom-width | 1px | Border width of the navigation bar border bottom | | --scroll-x-navbar-border-bottom-style | solid | Border style of the navigation bar border bottom | | --scroll-x-navbar-border-bottom-color | | Border color of the navigation bar border bottom | | --scroll-x-navbar-border-bottom-content | '' | Border bottom is rendered, pass none instead of '' if you want to remove the border bottom | | --scroll-x-navbar-ul-column-gap | | <ul> column-gap | | --scroll-x-navbar-ul-padding | | <ul> padding | | --scroll-x-navbar-ul-bg-color | | <ul> background-color | | --scroll-x-navbar-tab-bg-color | | Background-color of the tab | | --scroll-x-navbar-tab-color | | Color of the tab | | --scroll-x-navbar-tab-border-radius | | Border radius of the tab | | --scroll-x-navbar-tab-active-bg-color | | Background-color of the tab when is active | | --scroll-x-navbar-tab-active-color | | Color of the tab when is active | | --scroll-x-navbar-tab-hover-bg-color | | Background-color of the tab when is in hover | | --scroll-x-navbar-tab-hover-color | | Color of the tab when is in hover | | --scroll-x-navbar-tab-padding | | Padding of the tab | | --scroll-x-navbar-tab-cursor | pointer | Cursor of the tab | | --scroll-x-navbar-tab-outline-width | | Outline width of the tab | | --scroll-x-navbar-tab-outline-color | | Outline color of the tab | | --scroll-x-navbar-tab-outline-offser | | Outline offset of the tab |

Usage/Examples

<scroll-x-navbar-cmp
  :data-active-tab-id="`ScrollXNavbarCmp-1-tab-${activeTabId}`"
  @navigation="activeTabId = +$event.replace('ScrollXNavbarCmp-1-tab-', '')"
>
  <!-- an id with the same structure of data-active-tab-id is mandatory on li -->
  <!-- class="tab" is mandatory on li -->
  <li
    v-for="n in 5"
    :key="`tab-${n}`"
    :id="`ScrollXNavbarCmp-1-tab-${n}`"
    :class="['tab', { active: n.toString() === activeTabId }]"
  >
    <!-- class="tab-label" is mandatory on button -->
    <button
      type="button"
      class="tab-label"
      @click="activeTabId = n.toString()"
    >
      Tab Navigation Item Number {{ n }}
    </button>
  </li>
</scroll-x-navbar-cmp>

const activeTabId = ref<string>('1');

Screenshots