Footer

A versatile footer component with tab bar navigation, floating action buttons, and mini bars for persistent content.

Fullscreen

9:41

Variants

The Footer supports 3 different variants:

tab-bar

Standard mobile bottom navigation with icons and labels

floating

Elevated floating action button or pill

mini

Compact bar for persistent info like media players

Tab Bar

The most common mobile navigation pattern with icons, labels, and optional badges:

app.tsx

1import { AppShell, Content, Footer, FooterItem } from "appshell-react";
2import { Home, Search, Bell, User } from "lucide-react";
3 
4export default function App() {
5  const [activeTab, setActiveTab] = useState("home");
6 
7  return (
8    <AppShell safeArea>
9      <Content className="pb-24">
10        {/* Your content */}
11      </Content>
12      <Footer variant="tab-bar" behavior="auto-hide">
13        <FooterItem
14          icon={<Home />}
15          label="Home"
16          active={activeTab === "home"}
17          onClick={() => setActiveTab("home")}
18        />
19        <FooterItem
20          icon={<Search />}
21          label="Search"
22          active={activeTab === "search"}
23          onClick={() => setActiveTab("search")}
24        />
25        <FooterItem
26          icon={<Bell />}
27          label="Alerts"
28          badge={3}
29          active={activeTab === "alerts"}
30          onClick={() => setActiveTab("alerts")}
31        />
32        <FooterItem
33          icon={<User />}
34          label="Profile"
35          active={activeTab === "profile"}
36          onClick={() => setActiveTab("profile")}
37        />
38      </Footer>
39    </AppShell>
40  );
41}

Floating Action

Perfect for primary actions like "Add to Cart" or "Create New":

Fullscreen

9:41

Mini Bar

Compact bar for persistent information like media players:

tsx

1<Footer variant="mini">
2  <div className="flex items-center justify-between px-4 py-2">
3    <span className="text-sm text-muted-foreground">Now Playing</span>
4    <button className="text-primary">View</button>
5  </div>
6</Footer>

Auto-Hide Behavior

Set behavior="auto-hide" to automatically hide the footer when scrolling down and show it when scrolling up:

tsx

1<Footer variant="tab-bar" behavior="auto-hide">
2  {/* Footer items */}
3</Footer>

Footer Props

Prop	Type	Default	Description
variant	"tab-bar" \| "floating" \| "mini"	"tab-bar"	Visual variant
behavior	"static" \| "auto-hide"	"static"	Scroll behavior
position	"left" \| "center" \| "right"	"center"	Content alignment (floating only)
className	string	-	Additional CSS classes
children	ReactNode	-	FooterItem components or custom content

FooterItem Props

Prop	Type	Default	Description
icon	ReactNode	-	Icon element
label	string	-	Text label
active	boolean	false	Whether this item is active
badge	number \| string	-	Badge count or text
onClick	() => void	-	Click handler

Header Next: Content