MUI bottom navigation in a Next.js app

MUI's own BottomNavigation is the free answer for most apps. Here's the App Router setup with the active tab read from the URL, the move off @material-ui/core v4 for React 19, and how to run the Liquid Glass Tab Bar inside an MUI app.

One payment$3

By buying you agree to the Terms.

One payment, no subscription
Download right after paying
Use it in client projects
Won't run on the listed stack? We fix it or refund you

Ready forCursorv0Lovableshadcn CLI

Full product pageReact · Tailwind · TypeScript

MUI bottom navigation in Next.js

components/bottom-nav.tsx

"use client";
import Link from "next/link";
import { usePathname } from "next/navigation";
import Paper from "@mui/material/Paper";
import Badge from "@mui/material/Badge";
import BottomNavigation from "@mui/material/BottomNavigation";
import BottomNavigationAction from "@mui/material/BottomNavigationAction";
import HomeRounded from "@mui/icons-material/HomeRounded";
import SearchRounded from "@mui/icons-material/SearchRounded";
import BookmarkRounded from "@mui/icons-material/BookmarkRounded";
import InboxRounded from "@mui/icons-material/InboxRounded";
import PersonRounded from "@mui/icons-material/PersonRounded";

const tabs = [
  { href: "/", label: "Home", icon: <HomeRounded /> },
  { href: "/search", label: "Search", icon: <SearchRounded /> },
  { href: "/saved", label: "Saved", icon: <BookmarkRounded /> },
  {
    href: "/inbox",
    label: "Inbox",
    name: "Inbox, 2 new",
    icon: (
      <Badge badgeContent={2} color="error">
        <InboxRounded />
      </Badge>
    ),
  },
  { href: "/account", label: "Account", icon: <PersonRounded /> },
];

export function BottomNav() {
  const pathname = usePathname();
  // The active tab comes from the URL, so a refresh or a shared link keeps it right.
  const active = tabs.findIndex((t) => (t.href === "/" ? pathname === "/" : pathname.startsWith(t.href)));

  return (
    <Paper
      component="nav"
      aria-label="Main"
      elevation={3}
      sx={{
        position: "fixed",
        left: 0,
        right: 0,
        bottom: 0,
        zIndex: "appBar",
        pb: "env(safe-area-inset-bottom)",
        display: { md: "none" },
      }}
    >
      <BottomNavigation showLabels value={active}>
        {tabs.map((t, i) => (
          <BottomNavigationAction
            key={t.href}
            component={Link}
            href={t.href}
            label={t.label}
            icon={t.icon}
            aria-label={t.name}
            aria-current={i === active ? "page" : undefined}
          />
        ))}
      </BottomNavigation>
    </Paper>
  );
}

app/layout.tsx

import type { Metadata, Viewport } from "next";
import { AppRouterCacheProvider } from "@mui/material-nextjs/v15-appRouter";
import { ThemeProvider } from "@mui/material/styles";
import CssBaseline from "@mui/material/CssBaseline";
import Box from "@mui/material/Box";
import theme from "@/theme";
import { BottomNav } from "@/components/bottom-nav";

export const metadata: Metadata = { title: "My app" };

// viewport-fit=cover gives env(safe-area-inset-bottom) a value on iPhone.
export const viewport: Viewport = { viewportFit: "cover" };

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <AppRouterCacheProvider>
          <ThemeProvider theme={theme}>
            <CssBaseline />
            {/* Room for the bar on phones, so it never covers the last row. */}
            <Box component="main" sx={{ pb: { xs: "calc(56px + env(safe-area-inset-bottom))", md: 0 } }}>
              {children}
            </Box>
            <BottomNav />
          </ThemeProvider>
        </AppRouterCacheProvider>
      </body>
    </html>
  );
}

theme.ts

"use client";
import { createTheme } from "@mui/material/styles";

const theme = createTheme({
  palette: { primary: { main: "#4f46e5" } },
});

export default theme;

Good to know

The active tab comes from usePathname, not from local state, so a refresh, the back button or a shared link always marks the right tab. value is the index of the matching tab. On a path outside the five tabs findIndex returns -1, which matches no tab.
component={Link} turns each BottomNavigationAction into a real Next.js link, and aria-current="page" tells screen readers which one is open. MUI's Next.js doc has a Next.js 16 note: passing Link to the component prop can throw "Functions cannot be passed directly to Client Components", and its fix is a "use client" wrapper around Link. This file is already a client component that imports Link itself. We ran Next.js 15, so we haven't seen that error either way.
showLabels keeps all five labels on screen. Without it MUI shows the label of the selected tab only, which is what its docs suggest for four or five tabs.
The Inbox action gets an aria-label ("Inbox, 2 new"), so screen readers hear the count with the label instead of a bare 2.
BottomNavigation is 56px tall in MUI's default theme. The layout pads main by 56px plus env(safe-area-inset-bottom) below md, so the bar never covers the last row. The safe-area value is only non-zero on iPhone when the viewport has viewport-fit=cover, which is the viewport export in the layout.
What we ran on Oct 26 2026: these files in a scratch Next.js 15.5.28 app with React 19.1.1, @mui/material 9.5.0, @mui/material-nextjs 9.5.0, @mui/icons-material 9.5.0, @emotion/react 11.14.0, @emotion/styled 11.14.1, @emotion/cache 11.14.0, framer-motion 11.18.2 and TypeScript 5.9.3, with no Tailwind and no PostCSS config. tsc and next build passed, and an onTabChange typed (id: number) failed tsc as it should. In headless Chromium at 390 x 844 on /search, Search had aria-current="page", tapping Inbox went to /inbox and moved the mark there, the bar sat at the bottom at 56px with z-index 1100, and the last row of a long page ended above it. At 1440 the bar was hidden. Neither width scrolled sideways, and there were no page errors.
What we didn't run: Next.js 16 (use @mui/material-nextjs/v16-appRouter there), Safari, Firefox, a real iPhone notch, a screen reader, or MUI's codemod.

MUI bottom navigation: what MUI ships today

MUI has a bottom navigation component: BottomNavigation with BottomNavigationAction inside it. Its docs, read October 26, 2026, say bottom navigation bars "display three to five destinations at the bottom of a screen". Their fixed demo puts the bar in a Paper with position fixed and bottom 0, which is what the file above does.
For routing, the docs point to the component prop on BottomNavigationAction. That's where Next.js Link goes, so every tab is a link with prefetching instead of a button that calls router.push.
The App Router setup is MUI's own. Its Next.js integration doc says to wrap the body in AppRouterCacheProvider from @mui/material-nextjs, which collects MUI's styles on the server so they land in the head. @mui/material-nextjs 9.5.0 ships v13, v14, v15 and v16 versions of it; import the one that matches your Next.js major.
For most MUI apps this is the whole answer. It uses your theme, it's free, and it sits under the pages you already have.

Material UI v4 bottom navigation on React 19: move to @mui/material

If your bottom nav still imports from @material-ui/core, that's Material UI v4. npm marks @material-ui/core 4.12.4, the last v4 release, as deprecated with MUI's own message: "Material UI v4 doesn't receive active development since September 2021." Its peer range is react ^16.8.0 || ^17.0.0, so React 19 is outside it.
There's also a runtime reason. React 19's upgrade guide lists ReactDOM.findDOMNode as removed. In the 4.12.4 package, ButtonBase (which BottomNavigationAction is built on) and Portal call ReactDOM.findDOMNode. We read that in the source; we didn't run v4 on React 19.
The package names map one to one: @material-ui/core to @mui/material, @material-ui/icons to @mui/icons-material, @material-ui/lab to @mui/lab, and @material-ui/styles to @mui/styles. createMuiTheme is createTheme now. Add @emotion/react and @emotion/styled, which MUI uses for styles.
@mui/styles keeps makeStyles and withStyles alive, but npm lists it as deprecated too (6.4.8). In a bottom nav the swap is small: a styled() wrapper or an sx prop replaces the makeStyles class, as in the file below. The onChange event type also changed from React.ChangeEvent<{}> to React.SyntheticEvent.
MUI's v4 to v5 guide recommends its codemod first, npx @mui/codemod@latest v5.0.0/preset-safe <path>, which renames most imports for you. After v5 there are separate upgrade guides to v6 and v7, and the v9 guide covers the step from v7 to v9. @mui/material 9.5.0 lists react ^17, ^18 or ^19 as peers.

components/simple-bottom-nav.tsx

"use client";
// Was @material-ui/core 4 with makeStyles. Now @mui/material with styled().
import { useState, type SyntheticEvent } from "react";
import { styled } from "@mui/material/styles";
import BottomNavigation from "@mui/material/BottomNavigation";
import BottomNavigationAction from "@mui/material/BottomNavigationAction";
import RestoreIcon from "@mui/icons-material/Restore";
import FavoriteIcon from "@mui/icons-material/Favorite";
import LocationOnIcon from "@mui/icons-material/LocationOn";

// v4: const useStyles = makeStyles({ root: { width: 500 } }), then className={classes.root}
const Bar = styled(BottomNavigation)({ width: "100%", maxWidth: 500 });

export function SimpleBottomNav() {
  const [value, setValue] = useState(0);

  return (
    <Bar
      showLabels
      value={value}
      // v4 typed this event as React.ChangeEvent<{}>. Now it's React.SyntheticEvent.
      onChange={(_event: SyntheticEvent, next: number) => setValue(next)}
    >
      <BottomNavigationAction label="Recents" icon={<RestoreIcon />} />
      <BottomNavigationAction label="Favorites" icon={<FavoriteIcon />} />
      <BottomNavigationAction label="Nearby" icon={<LocationOnIcon />} />
    </Bar>
  );
}

When Liquid Glass Tab Bar fits instead

Liquid Glass Tab Bar draws a whole phone screen: the glass bar, five screens that slide when you switch tabs, a glass drop that magnifies the tab under it and stretches while it moves, a mini player above the bar, and a player sheet the drop bursts into. Your screens go inside it.
It fits when the phone view of your app is five top-level screens and you want them to feel like one native app: a media app, a habit or fitness tracker, or the phone side of a dashboard. If you want a plain row of icons under pages you already have, MUI's BottomNavigation above is the better fit.
It has exactly five tabs, and each tab's icon comes from its id (home, explore, library, inbox, profile). The data prop changes the labels and the badge. A different icon means editing the ICON map in LiquidGlassTabBar.tsx. The mini player shows data.music.nowPlaying, and no prop turns it off.
It's React for the web, not React Native. It's built with Framer Motion and its own CSS file, and it doesn't use MUI.

Run Liquid Glass Tab Bar inside an MUI app

You don't need Tailwind for it. The demo project in the download is set up with Tailwind CSS 3, but every class the component uses is defined in its own tabbar-liquid.css. Our scratch MUI app had no Tailwind and no PostCSS config, and the bar rendered with its glass (blur(16px) saturate(1.9)). What you add: framer-motion, the copied files, and the fonts the README names (Space Grotesk and JetBrains Mono), or your own fonts in --font-ui and --font-mono.
tabbar-liquid.css has a few global rules: html and body get a dark background, light text and Space Grotesk, every button is reset, and its colours sit on :root. We measured them in the scratch MUI app with the file imported as shipped. With MUI's default setup, MUI's Emotion styles land after the file, so body, the contained and outlined Buttons and Typography kept MUI's look. html still turned #0A0A0D with light text in Space Grotesk, which shows wherever body doesn't cover the screen.
MUI's Next.js doc suggests enableCssLayer: true on AppRouterCacheProvider when you also use plain CSS or Tailwind. That puts MUI's styles in @layer mui, and unlayered CSS beats layered CSS. With that option on and the file as shipped, an outlined Button lost its border and its padding (0px), and html turned dark again.
The fix is the same two edits our shadcn guide uses, shown below: wrap the file in @scope (.qd-tabbar) to (.qd-screen) and turn :root into :scope. With them the same app measured clean in both setups: html stayed transparent, and the Buttons kept their 6px 16px and 5px 15px padding and the outlined border.
To put your own MUI screens inside the bar, the component needs a small edit too (the TabScreens context below), because the shipped file renders its own demo music screens. With it, a contained MUI Button inside the Home screen took the click, four Cards in a Grid sat two to a row at 173px each on a 390px screen, and tapping Inbox showed the Inbox screen and logged "tab inbox". The mini player opened the player sheet.
Inside @scope a plain class selector doesn't match the scope root itself, so qd-tabbar goes on the outer Box with its position and height in sx, and native goes on the div inside it. MDN's compatibility data, read today, lists @scope in Chrome and Edge 118+, Firefox 146+ and Safari 17.4+. Safari 26.0 to 26.3 had a partial version that skips inputs and textareas, and the bar has neither. We only ran Chromium.

components/mobile-shell.tsx

"use client";
import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
import Card from "@mui/material/Card";
import CardContent from "@mui/material/CardContent";
import Grid from "@mui/material/Grid";
import Stack from "@mui/material/Stack";
import Typography from "@mui/material/Typography";
import { ThemeProvider, createTheme } from "@mui/material/styles";
import { LiquidGlassTabBar, TabScreens } from "@/components/LiquidGlassTabBar";
import NW, { type NorthwindData } from "@/data/northwind";

// The glass is dark, so the screens get a dark MUI theme of their own.
const glassTheme = createTheme({
  palette: { mode: "dark", background: { paper: "#16171F" } },
});

// Labels are yours. Keep the five ids: each id picks its icon in the component's ICON map.
const data: NorthwindData = {
  ...NW,
  music: {
    ...NW.music,
    tabs: [
      { id: "home", label: "Home" },
      { id: "explore", label: "Search" },
      { id: "library", label: "Saved" },
      { id: "inbox", label: "Inbox", badge: 2 },
      { id: "profile", label: "Account" },
    ],
  },
};

function Screen({ title, children }: { title: string; children: React.ReactNode }) {
  return (
    <Stack spacing={2}>
      <Typography variant="h4" component="h2" sx={{ fontWeight: 700 }}>
        {title}
      </Typography>
      {children}
    </Stack>
  );
}

// One screen per tab, in tab order.
const screens = [
  <Screen key="home" title="Home">
    <Grid container spacing={1.5}>
      {["Runs", "Streak", "Distance", "Pace"].map((label) => (
        <Grid key={label} size={6}>
          <Card variant="outlined">
            <CardContent>
              <Typography variant="body2" color="text.secondary">{label}</Typography>
              <Typography variant="h5">12</Typography>
            </CardContent>
          </Card>
        </Grid>
      ))}
    </Grid>
    <Button variant="contained" fullWidth onClick={() => console.info("log a run")}>
      Log a run
    </Button>
  </Screen>,
  <Screen key="search" title="Search">
    <Typography color="text.secondary">Your search screen.</Typography>
  </Screen>,
  <Screen key="saved" title="Saved">
    <Typography color="text.secondary">Saved items.</Typography>
  </Screen>,
  <Screen key="inbox" title="Inbox">
    <Typography color="text.secondary">Two new messages.</Typography>
  </Screen>,
  <Screen key="account" title="Account">
    <Button variant="outlined" fullWidth>Sign out</Button>
  </Screen>,
];

export function MobileShell() {
  return (
    <ThemeProvider theme={glassTheme}>
      <Box className="qd-tabbar" sx={{ position: "relative", height: "100%" }}>
        <div className="native">
          <TabScreens value={screens}>
            <LiquidGlassTabBar
              data={data}
              autoplayDemo={false}
              // The bar swaps its own screens; use this for analytics or to load a tab's data.
              onTabChange={(id) => console.info("tab", id)}
              onOpenPlayer={() => console.info("mini player opened")}
            />
          </TabScreens>
        </div>
      </Box>
    </ThemeProvider>
  );
}

app/phone/page.tsx

import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import { MobileShell } from "@/components/mobile-shell";

export default function Page() {
  return (
    <>
      {/* Phones: the glass tab bar and its five screens fill the viewport. */}
      <Box sx={{ display: { xs: "block", md: "none" }, height: "100dvh" }}>
        <MobileShell />
      </Box>

      {/* md and up: your usual MUI layout (AppBar, Drawer). */}
      <Box component="main" sx={{ display: { xs: "none", md: "block" }, p: 5 }}>
        <Typography variant="h4" component="h1">Dashboard</Typography>
      </Box>
    </>
  );
}

components/tabbar-liquid.css

/* components/tabbar-liquid.css (your copy). Edit 1: the file's first rule was ":root{". */
@scope (.qd-tabbar) to (.qd-screen) {
:scope{font-family:var(--font-ui);color:var(--text);
  --ink:#0A0A0D;--surface:#111218; /* ...every variable that was on :root stays here... */
}
/* ...the rest of the file stays as it is... */

/* Edit 2: hide the demo's 9:41 status bar, then close the @scope block. */
.sb{display:none}
}

components/LiquidGlassTabBar.tsx

// components/LiquidGlassTabBar.tsx (your copy): three small edits.

// 1. The React import gains createContext, useContext and ReactNode.
import { createContext, useContext, useEffect, useLayoutEffect, useRef, type CSSProperties, type ReactNode } from 'react';

// 2. Above Pages: a context for your screens. Pages renders them when a provider is set.
export const TabScreens = createContext<ReactNode[] | null>(null);

function Pages({ data }: { data: NorthwindData }) {
  const screens = useContext(TabScreens);
  if (screens) return <>{screens.map((s, i) => <div className="pg" data-pg={i} key={i}><div className="pgc"><div className="qd-screen">{s}</div></div></div>)}</>;
  // ...the demo screens below stay as they are...
}

// 3. In LensOrb: the drop draws a copy of the screens, so keep that copy out of the tab order.
<div className="orb" data-k="orb" aria-hidden="true" inert>

Install

Copy from the zipPut react/src/components + react/src/data into src/, then npm i framer-motion.
Or ask your AIPaste PROMPT.md into Cursor, Lovable or v0.

Props

data: your tab labels and badge, now playing and covers
onTabChange: called with the tab id
onOpenPlayer: the drop opened into the player
autoplayDemo: false in a real app
TabScreens: your five screens (a context the edit above adds, not a prop of the shipped file)

How qodesign compares

qodesign vs Hover.devHover.dev is best for: animated website sections you copy and paste.
qodesign vs Cult UICult UI is best for: free animated shadcn components and device mockups.

All comparisons, with prices read on each library's own site.

From the blog: findDOMNode Is Not a Function in React 19: Find It, Fix It

From the blog: Animated Tabs with Framer Motion in Next.js App Router

Questions

Does MUI have a bottom navigation component?

Yes: BottomNavigation with BottomNavigationAction, from @mui/material. The file at the top of this page puts it in a fixed Paper with Next.js links and the active tab read from the URL.

How do I use MUI BottomNavigation with the Next.js App Router?

Make the nav a client component, pass Next.js Link to BottomNavigationAction's component prop, and pick the active tab with usePathname. Wrap the app in AppRouterCacheProvider from @mui/material-nextjs, as MUI's Next.js doc says.

Can I keep @material-ui/core v4 on React 19?

Its peer range stops at React 17, npm marks it deprecated, and its ButtonBase calls ReactDOM.findDOMNode, which React 19 removed. Move to @mui/material: the imports map one to one, and MUI ships a codemod for the v5 step.

Do I need Tailwind for Liquid Glass Tab Bar in an MUI app?

No. Its classes all come from its own CSS file. Add framer-motion and the fonts, and scope the CSS file with the edit on this page so it leaves your MUI theme alone.

Can Cursor or v0 add it for me?

Yes. Each download has a PROMPT.md. Paste it into Cursor, Lovable, v0 or Claude Code and it fits the piece into your app.

Can I use it in client work?

Yes, in personal and client projects. You can't resell the code itself as a kit.