Nav Down

The best at hiding your navbar

It's simple to install

terminal

pnpm add -D navdown

And even more simple to use

First import it

typescript

import navdown from 'navdown'

Then 'use' it

html

<nav use:navdown>
	<a href="/">Link 1</a>
	<a href="/">Link 2</a>
	<a href="/">Link 3</a>
</nav>

There's default options to it

typescript

const options = {
		initialHeight: '0px',
		scrolledHeight: '0px 80px',
		transition: {
			transitionDelay: '0s',
			transitionDuration: '300ms',
			transitionProperty: 'translate',
			transitionTimingFunction: 'cubic-bezier(0.291, 0.281, 0, 1.2)'
		}
	}

But it's customizable

html

<nav use:navdown={{
    transition: {
      transitionDuration: '250ms',
    },
	initialHeight: '0px',
	scrolledHeight: '0px 80px'
  }}>
    <!-- some links -->
	</nav>

typescript

export interface Options {
	transition?: TransitionOptions;
	initialHeight?: string;
	scrolledHeight?: string;
}