Back

MacOS dock for framer

Framer code component

A customizable, animated dock component inspired by the macOS dock, perfect for adding a sleek navigation element to your designs.

Feature

Glassmorphic background effect
Smooth animation on hover
Customisable icons and links
Responsive design

Properties

Properties Table

Property	Type	Description
items	Array	An array of objects representing dock items
width	Number	Width of the dock (default: 400)
height	Number	Height of the dock (default: 80)

Each item in the items array should have the following structure:

{
  title: string,
  iconName: string,
  href: string
}

Usage

1. Drag and drop the "macOS-Style Floating Dock" component onto your canvas.

2. Customize the dock items using the properties panel:
- Add or remove items
- Change icon names (available options: home, search, user, settings, bell)
- Set custom titles and links for each item

3. Adjust the width and height as needed to fit your design.

4. For the best visual effect, place the dock over a colorful or image background to showcase the glassmorphic effect.

Customization Tips

- The dock looks best when placed at the bottom of the screen, mimicking the macOS dock placement.
- Experiment with different background colors and blur intensities by modifying the component's code.
- Add custom icons by extending the `iconPaths` object in the component's code.

Performance Considerations

- The dock uses Framer Motion for animations, which provides smooth performance on most devices.
- For complex projects, be mindful of the number of animated elements to maintain optimal performance.

Enjoy using this macOS-inspired dock to add a touch of elegance and familiarity to your Framer prototypes.

Handcrafted by Biswarup