DocsComponentsLayout
SidebarItem
ts
import { SidebarItem } from "@grassroot/ui-react"; <SidebarItem />ts
<script setup lang="ts">import { SidebarItem } from "@grassroot/ui-vue";</script> <template> <SidebarItem /></template>ts
import { Component } from "@angular/core";import { GrassrootSidebarItem } from "@grassroot/ui-angular"; @Component({ selector: "app-example", standalone: true, imports: [GrassrootSidebarItem], template: ` <grassroot-sidebar-item /> `,})export class ExampleComponent {}ts
<script lang="ts"> import { SidebarItem } from "@grassroot/ui-svelte";</script> <SidebarItem />ts
import { SidebarItem } from "@grassroot/ui-solid"; export function Example() { return ( <> <SidebarItem /> </> );}Installation
bash
pnpm dlx grassroot add ui/sidebar-itembash
npx grassroot@latest add ui/sidebar-itembash
yarn dlx grassroot add ui/sidebar-itembash
bunx grassroot add ui/sidebar-itemAPI Reference
| Prop | Type | Default |
|---|---|---|
iconLeading icon node (15px works best). | React.ReactNode | — |
activeMarks the current route — crimson inset rule + sunken tint. | boolean | undefined | — |
countMono count shown at the trailing edge. | React.ReactNode | — |
trailingArbitrary trailing node (status dot, badge). Overrides `count`. | React.ReactNode | — |
hrefRender as an anchor. | string | undefined | — |