Name: Slider Nav Button
Author: Samet Ozkale

A pill-shaped navigation button with a divider-to-hover animation. When you hover over the left or right arrow, a background slides out from the central divider toward the hovered side. Created by Samet Ozkale.

Default

The component consists of two arrow buttons separated by a thin divider. Hover interaction reveals the sliding background effect.

Hover over the left or right arrow
to see the divider-to-hover animation

View on npm

Open in Cursor Open in v0

Sizes

Available in three sizes: sm, md, and lg.

Dark theme

Customize colors with CSS custom properties for dark mode or any theme.

Border, hover, and icon colors can be customized
via CSS variables for seamless theme integration.

How to use in your project

The component works with both Vanilla JavaScript and React. Install the package and choose the integration that fits your stack.

Installation

Install the package and, for React projects, the Hugeicons dependencies used by the default icons.

Bash terminal

            # Core package (Vanilla JS or React)
npm install slider-nav-button

# For React with default icons
npm install @hugeicons/react @hugeicons/core-free-icons
          

Vanilla JavaScript

Without a framework, import the component and mount it into a DOM element. Don't forget to import the styles.

JavaScript app.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 the React component and use it like any other component. Styles are included automatically.

React carousel.tsx

            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"
    />
  );
}
          

Customization

Use CSS custom properties to match your theme. Target the .snb class or pass a custom className.

CSS styles.css

            .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;
}
          

Custom icons

Replace the default arrows with your own icons via the iconLeft and iconRight props.

React example.tsx

            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}
/>
          

CDN (no bundler)

Load the package from unpkg when you're not using a build tool.

            HTML
            index.html
            
          

            <!-- Mount point in your HTML body -->
<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>
          