---
url: "https://vueda.dev/v3/reference/theming/keys/SidebarRail.md"
title: "SidebarRail"
---

# SidebarRail

Source: `client/lib/theme/vueda-tailwind/navigation/index.js`

> Edge hit target for toggling collapsed state.

Vue component: [SidebarRail](/v3/reference/api/vue/SidebarRail.md)

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/SidebarRail.md#theme-key-SidebarRail-root) | 7 classes | Edge hit target for toggling collapsed state. |

<a id="theme-key-SidebarRail-root"></a>

## root

> Edge hit target for toggling collapsed state.

Default classes:

```text
hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 cursor-pointer
transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0
after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex
hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0
group-data-[collapsible=offcanvas]:after:left-full
[[data-side=left][data-collapsible=offcanvas]_&]:-right-2
[[data-side=right][data-collapsible=offcanvas]_&]:-left-2
```

Source: `client/lib/theme/vueda-tailwind/navigation/SidebarRail.theme.js:16`