Doc Nav

@sushindustries/ui

The left rail of a documentation page - the sections of a library, the elements in each, and the one that is open.

6 min read

Composing it

renderLink={({ id, className, children, ...rest }) => (
	<Link to="/components/$slug" params={{ slug: id }} className={className} {...rest}>
		{children}
	</Link>
)}

tsx

id arrives beside the resolved href because a typed router needs the route pattern and its params, not a finished path. aria-current rides in rest for the open item, since this component cannot set an attribute on an element it did not create. The row itself carries data-active, so the colour is right even when a host drops what it is handed.