Loading craft...
Loading craft...
A versatile floating action bar component with two distinct modes: dock (persistent navigation) and contextual (conditional display). Supports 8 different positions, smooth animations, and fully responsive layouts. Perfect for mobile navigation, bulk actions, shopping carts, and contextual notifications.
I kept saving examples of floating action bars from various apps that really helped with action-based interactions. They were perfect for bulk selections, shopping carts, and contextual notifications. But when I went looking for something similar in component libraries, I couldn't find anything that fit the bill.
So I decided to build my own. While making it, I thought about making it as reusable as possible - supporting different positions, dock mode for persistent navigation, and contextual mode for conditional actions. The result is something flexible enough to handle all those saved references and more.
1import {2ActionBarProvider,3ActionBar,4ActionBarHeader,5ActionBarTitle,6ActionBarActions,7ActionBarClose,8} from '@/craft/components/action-bar';9import { Button } from '@/components/ui/button';10import { useState } from 'react';1112function MyComponent() {13const [isOpen, setIsOpen] = useState(false);1415 return (16 <ActionBarProvider17 mode='contextual'18 open={isOpen}19 onOpenChange={setIsOpen}20 >21 <ActionBar>22 <ActionBarHeader>23 <ActionBarTitle>2 items selected</ActionBarTitle>24 </ActionBarHeader>25 <ActionBarActions>26 <Button size='sm'>Delete</Button>27 <ActionBarClose />28 </ActionBarActions>29 </ActionBar>30 </ActionBarProvider>31 );3233}
| Props | Description | Default |
|---|---|---|
mode | Display mode: "dock" for persistent navigation or "contextual" for conditional display | "contextual" |
position | Position of the action bar: "top", "bottom", "left", "right", "top-left", "top-right", "bottom-left", "bottom-right" | "bottom" |
open | Controlled open state (only for contextual mode) | - |
onOpenChange | Callback when open state changes (only for contextual mode) | - |
defaultOpen | Default open state for uncontrolled (only for contextual mode) | false |
| Props | Description | Default |
|---|---|---|
size | Size variant: "sm", "md", or "lg" | "md" |
position | Position override (inherits from provider if not specified) | - |
animationDelay | Animation delay in milliseconds (only for contextual mode) | 100 |
offset | Offset from the edge in pixels. For top/bottom: affects vertical spacing. For left/right: affects horizontal spacing. For corners: affects both axes | 16 |
maxWidth | Maximum width for horizontal positions (top, bottom, corners) | "640px" |
maxHeight | Maximum height for vertical positions (left, right) | "calc(100vh - 2rem)" |
className | Additional CSS classes | - |
| Props | Description | Default |
|---|---|---|
srText | Screen reader text for the close button | "Close" |
className | Additional CSS classes | - |
ActionBarHeader, ActionBarTitle, ActionBarDescription, ActionBarActions, ActionBarContent, ActionBarLogo, ActionBarNav, ActionBarSeparator, and ActionBarTrigger all accept standard HTML attributes and optional className prop.
Implementation inspired by shadcn/ui component patterns and modern mobile navigation interfaces.