next-browser-nav

Mobile browser navigation bar (back · reload · forward) for Next.js — fixed at the bottom, visible on mobile only.

Installation

# npm
npm install next-browser-nav

# yarn
yarn add next-browser-nav

# pnpm
pnpm add next-browser-nav

Usage

1. Import the SCSS

Import the SCSS file into your own stylesheet:

@import 'next-browser-nav/styles';

You can override the default variables before the import:

$webview-nav-bg: #f9f9f9;
$webview-nav-color: #111;
$webview-nav-breakpoint: 1024px;

@import 'next-browser-nav/styles';

Available SCSS variables

| Variable | Default | Description | |---|---|---| | $webview-nav-breakpoint | 768px | Hide the bar above this width | | $webview-nav-bg | #fff | Background color | | $webview-nav-border-color | #e5e5e5 | Top border color | | $webview-nav-color | #333 | Icon color | | $webview-nav-active-bg | #f0f0f0 | Button active state background | | $webview-nav-z-index | 9999 | z-index |

2. Add the component

import NextBrowserNav from 'next-browser-nav';

export default function Layout({ children }) {
  return (
    <>
      {children}
      <NextBrowserNav />
    </>
  );
}

Props

| Prop | Type | Default | Description | |---|---|---|---| | iconSize | number | 32 | Size of all icons in pixels | | iconColor | string | '#333' | Color of all icons | | excludePaths | string[] | [] | Paths on which the bar is hidden (supports * wildcard suffix) | | backIcon | component | built-in < icon | Custom back icon component | | forwardIcon | component | built-in > icon | Custom forward icon component | | reloadIcon | component | built-in reload icon | Custom reload icon component |

Custom icon components receive { size, color } props.

Examples

// Larger icons
<NextBrowserNav iconSize={36} />

// Custom color
<NextBrowserNav iconSize={36} iconColor="#A90432" />

// Hide on specific pages
<NextBrowserNav excludePaths={['/checkout', '/admin*']} />

// Custom icon components
<NextBrowserNav
  iconSize={36}
  backIcon={({ size, color }) => <MyBackIcon size={size} color={color} />}
  reloadIcon={({ size, color }) => <MyReloadIcon size={size} color={color} />}
  forwardIcon={({ size, color }) => <MyForwardIcon size={size} color={color} />}
/>

Behaviour

• Calls window.history.back(), window.history.forward(), and window.location.reload() directly.
• Renders nothing on paths matched by excludePaths — exact match or prefix wildcard (e.g. '/admin*').

Requirements

• Next.js 13+
• React 18+
• A SCSS-capable bundler (Next.js supports SCSS out of the box)

License

MIT