50 components available

Navigation Indicator

Name: Navigation Indicator
Uploaded: 2024-08-26T00:00:00.000Z
Description: A vertical interactive navigation bar that visually indicates the active item and displays tooltips on hover with smooth animations.

August 2024

A vertical interactive navigation bar that visually indicates the active item and displays tooltips on hover with smooth animations.

Source Code

MUI

Tailwind

navigation-indicator.tsx

1import { Box } from '@mui/system';
2import { motion } from 'framer-motion';
3import { useState } from 'react';
4
5export interface NavigationIndicatorProps {
6  items?: string[];
7  activeIndex?: number | null;
8  onClick?: (index: number) => void;
9}
10
11const NavigationIndicator = (props: NavigationIndicatorProps) => {
12  const { items = [], activeIndex = null, onClick } = props;
13  const [hoverIndex, setHoverIndex] = useState<null | number>(null);
14
15  const animate = (val: number) =>
16    hoverIndex === null
17      ? 0.4
18      : Math.max(1 - 0.2 * Math.abs(val - hoverIndex), 0.4);
19
20  const handleClick = (index: number) => {
21    onClick?.(index);
22  };
23
24  return (
25    <Box sx={{ display: 'flex', flexDirection: 'column' }}>
26      {items.map((item, index) => (
27        <Box
28          key={index}
29          sx={{ padding: '4px 0', cursor: 'pointer', position: 'relative' }}
30          onMouseEnter={() => setHoverIndex(index)}
31          onMouseLeave={() => setHoverIndex(null)}
32          onClick={() => handleClick(index)}
33        >
34          <Box
35            component={motion.div}
36            initial={{ scale: 0.4 }}
37            animate={{
38              scale: animate(index),
39            }}
40            transition={{
41              type: 'spring',
42              stiffness: 200,
43              damping: 15,
44            }}
45            sx={{
46              width: 38,
47              height: 4,
48              backgroundColor: activeIndex === index ? '#ffb224' : '#a0a0a0',
49              borderRadius: '4px',
50            }}
51          />
52
53          {hoverIndex === index ? (
54            <Box
55              component={motion.span}
56              initial={{
57                opacity: 0,
58                scale: 0.4,
59                filter: 'blur(5px)',
60              }}
61              animate={{
62                opacity: 1,
63                scale: 1,
64                filter: 'blur(0px)',
65              }}
66              transition={{
67                duration: 0.15,
68                delay: 0.0875,
69              }}
70              sx={{
71                fontSize: 11,
72                color: activeIndex === index ? '#ffb224' : '#a0a0a0',
73                position: 'absolute',
74                left: 44,
75                top: -2,
76                whiteSpace: 'nowrap',
77              }}
78            >
79              {item}
80            </Box>
81          ) : null}
82        </Box>
83      ))}
84    </Box>
85  );
86};
87
88export default NavigationIndicator;

Inspired by: https://www.ibelick.com

Cool Badge

Track Invoices