---
title: "Bottom Nav Bar — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Russet Supply · Navigation. Expandable dock navigation"
canonical: "https://framer.elliotli.dev/component/bottom-nav-bar"
---

[Home](/)/[Components](/components)/[Navigation](/components/category/navigation)/Bottom Nav Bar

# Bottom Nav Bar

Expandable dock navigation

[View on Framer](https://framer.com/marketplace/components/bottom-nav-bar/?via=elliot-li)

![Bottom Nav Bar preview image 1](https://framer.elliotli.dev/og/component/bottom-nav-bar/8aacbc3f7213115f/1600x1200.jpg)

## Summary

Expandable dock navigation

## Description

A modern expandable bottom navigation component for Framer that combines a clean dock-style layout with a beautifully animated full-screen menu. With a single click, the compact navigation expands into a customizable menu where visitors can browse pages, open social profiles, copy contact information, or close the menu with a smooth transition.

### Designed for:

Portfolios, agencies, startups, freelancers, and modern landing pages, DockMenu helps keep navigation accessible without taking over the interface.

Everything is controlled through Framer's native property panel—no code required.

## Interaction Flow

The experience is simple and intuitive.

**Collapsed State**

-   Displays a compact dock with your logo and menu button.
    

**Expanded State**

-   Smoothly expands into a full navigation panel.
    
-   Menu icon transforms into a close icon.
    
-   Navigation links become visible.
    
-   Social links appear.
    
-   Phone number and email are displayed.
    

**Navigation**

-   Every menu item can redirect to its own page or external URL.
    

**Social Links**

-   Each social profile supports its own custom destination.
    

**Copy Actions**

-   Phone number copies with one click.
    
-   Email address copies with one click.
    

**Close**

-   Tap the close button to return to the compact dock.
    

## Perfect For

-   Personal portfolios
    
-   Creative agencies
    
-   Design studios
    
-   Freelancers
    
-   SaaS websites
    
-   Product pages
    
-   Startup landing pages
    
-   Photography portfolios
    
-   Architecture websites
    
-   Personal brands
    

## Fully Customizable

Every part of the component can be customized directly from Framer.

### Branding

-   Logo text
    
-   Logo size
    
-   Logo typography
    
-   Logo color
    

### Navigation

-   Add or remove menu items
    
-   Navigation labels
    
-   Individual page links
    
-   Typography
    
-   Active colors
    
-   Spacing
    

### Contact

-   Phone number
    
-   Email address
    
-   Copyable values
    
-   Labels
    

### Layout

-   Dock width
    
-   Dock height
    
-   Expanded panel size
    
-   Padding
    
-   Spacing
    
-   Corner radius
    

## Simply:

1.  Drop the component onto your page.
    
2.  Add your navigation links.
    
3.  Connect your social profiles.
    
4.  Enter your contact details.
    
5.  Customize the layout and colors.
    
6.  Publish.
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #3208

## Details

- **Author**: Russet Supply
- **Price**: $5.00
- **Published**: 2026-07-21
- **Updated**: 2026-11-04
- **Added**: 2026-07-21
- **Categories**: Navigation

## More like this

-   [Reveal Navigations](/component/reveal-navigations) — Design Supply · Free — A calmer way to open your menu
-   [Collapsible Sidebar](/component/collapsible-sidebar) — Marso Angelov · $10 — Responsive Side Navigation
-   [Dial Picker](/component/dial-picker) — Tanmay Kaper · $14 — A machined dial for your projects
-   [Expanding Side Menu](/component/expanding-side-menu) — Russet Supply · $5 — Animated Framer Navigation