Animated Curved Bottom Navigation Bar

Animated Curved Bottom Navigation Bar is a clean and responsive navigation component built with pure HTML, CSS, JavaScript, and SVG.

The design features a rounded purple navigation bar with three navigation items: Home, Menu, and Profile.

Instead of using a static active indicator, the component creates a moving curved cutout in the navigation surface. When the active item changes, the curved section smoothly travels to the selected icon while a circular bubble follows the same position.

The active icon lifts upward and changes to a bright accent color, making the selected page easy to identify without adding unnecessary labels or visual clutter.

The navigation also includes a hover-preview interaction for desktop users.

When the mouse moves over another navigation item, the curved cutout and active visual state temporarily move to that item without changing the selected page or modifying the URL.

Once the pointer leaves the navigation bar, the interface smoothly returns to the currently selected item.

Clicking a navigation item updates the active state and works with native URL hash navigation.

Because the links use standard hash URLs, browser Back and Forward navigation can remain synchronized with the component.

The component also dispatches a custom navbar:change event whenever the selected page changes. This makes it easy to connect the navigation to your own page sections, SPA state, tab system, dashboard content, or application routing logic.

Keyboard navigation is built in.

Users can move between navigation items using the Left and Right arrow keys, jump to the first or last item with Home and End, and activate an item using the Space key.

The component includes accessible labels, aria-current support, a live status message, visible keyboard focus styling, and support for the prefers-reduced-motion setting.

Responsive behavior is handled automatically.

The navbar scales according to the available width, and JavaScript uses ResizeObserver to keep the icons, movement distance, and active-item lift proportional to the rendered navigation size.

Everything is contained in a single standalone HTML file.

No Bootstrap, Tailwind CSS, React, jQuery, icon library, or external animation package is required.

Key Features

• Animated curved navigation bar

• Moving active cutout

• Floating active icon

• Animated circular selection bubble

• Smooth active-item transitions

• Desktop hover preview

• Active-state color change

• Native hash navigation

• Browser Back and Forward support

• Custom navbar:change event

• Keyboard arrow navigation

• Home and End key support

• Space key activation

• aria-current state

• Screen-reader status feedback

• Visible focus styling

• Responsive scaling

• ResizeObserver integration

• Reduced-motion support

• Inline SVG icons

• Pure HTML, CSS, and JavaScript

• No external dependencies

How It Works

The navbar surface is drawn using SVG.

The curved cutout is part of the SVG path itself rather than being simulated with a background-colored circle.

JavaScript rebuilds the SVG path around the current active position.

As the active item changes, the cutout position moves horizontally across the navigation bar.

The circular bubble behind the active icon follows the same horizontal coordinate.

The animation uses requestAnimationFrame and an ease-out curve to smoothly interpolate between the previous and new positions.

The active icon also moves upward while changing to the accent color.

Hover Preview

Desktop mouse users can preview another navigation item by hovering over it.

During a hover preview:

• The cutout moves to the hovered item

• The hovered icon receives the active appearance

• The actual selected page remains unchanged

• The URL remains unchanged

When the pointer leaves the navigation area, the visual state returns to the selected page.

Navigation State

The component uses normal anchor links such as:

#home

#menu

#profile

This means the current navigation state can work with the browser URL.

Hash changes are detected and synchronized with the active navigation item.

The selected link also receives aria-current="page" for accessibility.

Custom Event

Whenever the selected navigation item changes, the component dispatches:

navbar:change

The event includes the selected page name and index.

You can listen for this event and connect the navigation to:

• Page sections

• Dashboard views

• Mobile app layouts

• SPA content

• Tab systems

• Custom routing logic

Keyboard Navigation

The navigation supports:

• Arrow Right — move to the next item

• Arrow Left — move to the previous item

• Home — select the first item

• End — select the last item

• Space — activate the focused item

Responsive Design

The component automatically adjusts its internal scale according to the rendered navigation width.

ResizeObserver detects size changes and updates the icon dimensions and movement unit so the animation remains proportional on smaller screens.

Accessibility

Each navigation item includes an accessible label.

The currently selected item uses aria-current="page".

A live status region announces the selected navigation item.

Keyboard focus is clearly visible around each control.

Users with reduced-motion enabled receive state changes without the full movement animation.

Customization

The design is easy to customize through CSS variables.

You can change:

• Navigation background color

• Border color

• Active icon color

• Animation duration

• Animation easing

• Navbar width

• Icon design

• Number of navigation destinations

• Active-item lift

• Cutout depth

• Bubble size

The included Home, Menu, and Profile SVG icons can also be replaced with your own icons.

Recommended Use Cases

• Mobile website navigation

• Mobile-first dashboards

• Portfolio websites

• SaaS interfaces

• Progressive web apps

• Admin panels

• Landing pages

• App-style websites

• Bottom navigation menus

• UI/UX experiments

• Frontend portfolio projects

• Navigation animation practice

Important Note

The included links demonstrate navigation using URL hashes.

The component does not include a full router or page-management framework.

For a real application, connect the navbar:change event or link destinations to your own routing, page sections, framework navigation, or application state.