Slider Nav Button

Pill-shaped slider navigation button with divider-to-hover animation. Inspired by adria.studio.

When you hover over the left or right arrow, a background slides out from the central divider toward the hovered side.

Installation

npm install slider-nav-button

For the React version, also install the peer dependencies:

npm install framer-motion @hugeicons/react @hugeicons/core-free-icons

Usage

Vanilla JS

// In your HTML: <div id="slider-container"></div>

import { SliderButton } from 'slider-nav-button';
import 'slider-nav-button/styles.css';

const button = new SliderButton({
  onPrev: () => console.log('Previous'),
  onNext: () => console.log('Next'),
  size: 'md',  // 'sm' | 'md' | 'lg'
});

button.mount('#slider-container');

React

import { useState } from 'react';
import { SliderButton } from 'slider-nav-button/react';

function Carousel() {
  const [index, setIndex] = useState(0);

  return (
    <SliderButton
      onPrev={() => setIndex(prev => Math.max(0, prev - 1))}
      onNext={() => setIndex(prev => prev + 1)}
      size="md"
    />
  );
}

The React version includes styles automatically.

CDN (no bundler)

<div id="container"></div>
<link rel="stylesheet" href="https://unpkg.com/slider-nav-button/dist/slider-button.css">
<script type="module">
  import { SliderButton } from 'https://unpkg.com/slider-nav-button/dist/index.js';
  new SliderButton({ onPrev: () => {}, onNext: () => {} }).mount('#container');
</script>

Custom icons (React)

import { ChevronLeftIcon, ChevronRightIcon } from '@hugeicons/core-free-icons';
import { HugeiconsIcon } from '@hugeicons/react';
import { SliderButton } from 'slider-nav-button/react';

<SliderButton
  iconLeft={<HugeiconsIcon icon={ChevronLeftIcon} size={18} />}
  iconRight={<HugeiconsIcon icon={ChevronRightIcon} size={18} />}
  onPrev={handlePrev}
  onNext={handleNext}
/>

API

Vanilla JS

Constructor options

| Option | Type | Default | Description | |--------|------|---------|-------------| | onPrev | () => void | - | Callback when left arrow is clicked | | onNext | () => void | - | Callback when right arrow is clicked | | iconLeft | string | Default arrow SVG | Custom SVG HTML string for left icon | | iconRight | string | Default arrow SVG | Custom SVG HTML string for right icon | | size | 'sm' \| 'md' \| 'lg' | 'md' | Button size | | className | string | - | Additional CSS class for the container |

Methods

• getElement() - Returns the root DOM element
• mount(parent) - Mount into a parent element (selector or HTMLElement)
• unmount() - Remove from the DOM
• update(options) - Update options (iconLeft, iconRight, size, className)

React

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | onPrev | () => void | - | Callback when left arrow is clicked | | onNext | () => void | - | Callback when right arrow is clicked | | iconLeft | ReactNode | Default arrow | Custom left icon | | iconRight | ReactNode | Default arrow | Custom right icon | | size | 'sm' \| 'md' \| 'lg' | 'md' | Button size | | className | string | - | Additional CSS class |

Customization

Use CSS custom properties to theme the component. Target the .snb class or pass a custom className:

.snb {
  --snb-bg: transparent;
  --snb-hover-bg: #f7f7f7;
  --snb-border-color: #f2f2f2;
  --snb-icon-color: #17181A;
  --snb-divider-color: var(--snb-border-color);
  --snb-radius: 9999px;
  --snb-height: 36px;
  --snb-width: 90px;
  --snb-icon-size: 18px;
  --snb-transition-duration: 0.28s;
  --snb-transition-easing: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --snb-hover-padding: 2px;
}

Dark theme

.dark-container .snb {
  --snb-bg: transparent;
  --snb-hover-bg: #323232;
  --snb-border-color: rgba(255, 255, 255, 0.05);
  --snb-divider-color: rgba(255, 255, 255, 0.05);
  --snb-icon-color: #fff;
}

Demo

npm run demo

Then open the URL shown (e.g. http://localhost:3000/demo/).

Browser support

Vanilla JS uses mousemove/mouseleave for hover detection; React uses framer-motion. Supported in all modern browsers (Chrome 105+, Firefox 121+, Safari 15.4+).

License

MIT