Slide-in Navigation

Animated navigation menu that slide into view

Use the SlideInNavigation component to animate your navigation menus into view. They maximize space for primary content by hiding navigation items until needed. You can also use them to include secondary links that are not needed in the viewport initially, such as account options.

---
const items = [
    { name: 'Home', href: '/' },
    { name: 'Projects', href: '/projects' },
    { name: 'Contact', href: '/contact' }
]
---

<SlideInNavigation items={items} delay={0.07} />

To use the SlideInNavigation component, pass an items prop that expects a list of URLs in the form of an array of objects with the following possible properties:

• name: Sets the name of the anchor.
• href: Sets the link for the anchor.
• target: Sets the target of the anchor.

The above example also uses the delay prop which can be used to delay the animation of each menu item by a number of milliseconds. You can omit this prop or adjust its value to get different types of animations:

In the above example, delay is set to 0.2. The higher the value, the slower the animation becomes. Prefer using smaller values to improve perceived performance.

Direction

By default, the navigation will be rendered on the left-side of its container. You can easily change this positioning and move your slide-in navigation from left to right using the reverse prop:

<SlideInNavigation
    items={items}
    delay={0.07}
    reverse={true}
/>

API

type SlideInNavigationProps = {
    items: {
        name: string
        href?: string
        target?: '_self'
            | '_blank'
            | '_parent'
            | '_top'
            | '_unfencedTop'
    }[]
    reverse?: boolean
    delay?: number
    className?: string
}