FloatingMenuBar

A floating bottom navigation bar for mobile apps. Supports animated tab selection, icon badges, and glass-style backgrounds.

Import

tsx

import { FloatingMenuBar } from '@tac-ui/native';

Basic Usage

Define menu items with key, icon render function, and label. The active tab animates with spring physics.

FloatingMenuBar is positioned absolutely at the bottom of its container. Wrap your screen content and the menu bar in a flex container.

tsx

import { Home, Search, Bell, User } from '@tac-ui/icon-native';

const items = [
  { key: 'home', icon: (p) => <Home {...p} />, label: 'Home' },
  { key: 'search', icon: (p) => <Search {...p} />, label: 'Search' },
  { key: 'inbox', icon: (p) => <Bell {...p} />, label: 'Inbox', badge: 3 },
  { key: 'profile', icon: (p) => <User {...p} />, label: 'Profile' },
];

<FloatingMenuBar
  items={items}
  activeKey="home"
  onSelect={(key) => setActiveKey(key)}
/>

Glass Variant

Use the glass prop for a translucent frosted background that blends with content behind it.

The glass variant uses a semi-transparent background, ideal for overlaying rich content.

tsx

<FloatingMenuBar
  items={items}
  activeKey="home"
  onSelect={setActiveKey}
  glass
/>

API Reference

Prop	Type	Default	Description
items	FloatingMenuBarItem[]	-	Array of menu items with key, icon, label, and optional badge.
activeKey	string	-	Key of the currently active tab.
onSelect	(key: string) => void	-	Called when a menu item is pressed.
glass	boolean	false	Uses a translucent glass-style background.

FloatingMenuBarItem

Prop	Type	Default	Description
key	string	-	Unique identifier for the tab.
icon	(props: { color, size }) => ReactNode	-	Icon render function receiving color and size.
label	string	-	Text label shown below the icon.
badge	number	-	Badge count displayed on the icon.