# Sidebar nav
> Sidebar nav with pixel icons and count badges, a hover block and an active bar that slides to the current item.
- React: `import { PxNav } from "@/components/lumesec/px-nav"`
- Collection: Pixel UI (https://elements.lumesec.ai/components/pixel-ui)
- Registry item: https://elements.lumesec.ai/r/px-nav.json
- Page: https://elements.lumesec.ai/components/pixel-ui/nav
Live preview: https://elements.lumesec.ai/view/px-nav
Demo source:
```tsx
import { PxNav } from "@/components/lumesec/px-nav";
export default function PxNavDemo() {
return (
);
}
```
## Playground
Change a prop and the component re-renders. Props marked remounts set an initial value, so the component starts over.
## Installation
```bash
npx shadcn@latest add @lumesec/px-nav
```
First time with the @lumesec registry? Register it once, or install by URL:
```bash
npx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json
npx shadcn@latest add https://elements.lumesec.ai/r/px-nav.json
```
## Usage
React:
```tsx
import { PxNav } from "@/components/lumesec/px-nav";
export function Example() {
return (
);
}
```
## Behaviour
Takes a list of links and adds pixel icons, count badges, a soft hover block and an active bar that slides to the current item.
## API reference
### Props
Also accepts every prop of `