score:0

as far as i know, chakra ui has no built-in functionality of current/active links. this leaves us with two options: implementing custom logic and using other libraries.

the easiest of two will be to use react-scroll library that already has this functionality.

import { link as scrolllink } from 'react-scroll';

and then use it wherever you want like so:

<scrolllink
    to='home'
    activeclass="active"
    spy={true}
    smooth={true}
    offset={0}
    duration={1500}>
home
</scrolllink >

to prop is referencing to id of the element you want to scroll to, so in my example it will be an element with id #home. make sure to pass spy={true} prop and activeclass="yourclassname". you can later use this classname to style active links of the header. offset prop defines how close or far from element the class will be toggled. and lastly, duration prop defines how long the scroll animation will continue for.


Related Query

More Query from same tag