social sticky sidebar icons share follow fixed hover-label social sticky sidebar fixed share follow icons hover label floating sticky social media sidebar fixed social icons on page edge floating social share widget
Social Sticky Sidebar
Fetch pattern JSON:
curl https://webspire.de/patterns/social/sticky-sidebar.json sticky-sidebar.html
Details
Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
socialstickysidebariconssharefollowfixedhover-label
Slots
| Name | Required | Description |
|---|---|---|
| left-strip | Yes | Left edge vertical icon column with Share label and 5 social icons. |
| right-strip | Yes | Right edge vertical icon column with Follow label and 5 social icons. |
Props
| Name | Type | Default | Description |
|---|---|---|---|
| icons | string[] | [twitter, instagram, linkedin, youtube, github] | Social platform icons to show in each strip. |
Two fixed vertical strips — one on the left edge (Share), one on the right edge (Follow). Each strip contains 5 social icons (Twitter/X, Instagram, LinkedIn, YouTube, GitHub) with platform brand colors on hover. A tooltip label slides out on hover via CSS opacity transition. The “Share” and “Follow” labels are rotated 90deg. Production use requires fixed positioning (see install notes).