@neynar/ui/llm-docs/sidebar-menu-item.llm.md

React UI component library built on shadcn/ui and Tailwind CSS

# SidebarMenuItem

**Type**: component

Individual menu item container for sidebar navigation A list item container that wraps a single navigation item, typically containing a SidebarMenuButton along with optional components like SidebarMenuAction, SidebarMenuBadge, or SidebarMenuSub for hierarchical navigation.

## JSX Usage

```jsx
import { SidebarMenuItem } from '@neynar/ui';

<SidebarMenuItem
  className="value"
/>
```

## Component Props

### className
- **Type**: `string`
- **Required**: No
- **Description**: No description available

## Examples

### Example 1
```tsx
// Simple menu item with button
<SidebarMenuItem>
  <SidebarMenuButton>
    <Home />
    <span>Dashboard</span>
  </SidebarMenuButton>
</SidebarMenuItem>
```
### Example 2
```tsx
// Menu item with badge
<SidebarMenuItem>
  <SidebarMenuButton>
    <Inbox />
    <span>Messages</span>
  </SidebarMenuButton>
  <SidebarMenuBadge>5</SidebarMenuBadge>
</SidebarMenuItem>
```
### Example 3
```tsx
// Menu item with action button
<SidebarMenuItem>
  <SidebarMenuButton>
    <Folder />
    <span>Projects</span>
  </SidebarMenuButton>
  <SidebarMenuAction showOnHover>
    <Plus />
  </SidebarMenuAction>
</SidebarMenuItem>
```
### Example 4
```tsx
// Menu item with submenu
<SidebarMenuItem>
  <SidebarMenuButton>
    <Folder />
    <span>Projects</span>
    <ChevronRight className="ml-auto" />
  </SidebarMenuButton>
  <SidebarMenuSub>
    <SidebarMenuSubItem>
      <SidebarMenuSubButton>Web App</SidebarMenuSubButton>
    </SidebarMenuSubItem>
  </SidebarMenuSub>
</SidebarMenuItem>
```