Skip to main content
The BottomNavigation component provides a fixed bottom navigation bar for mobile devices, displaying key navigation links with icons.

​
Component Location

File: src/components/BottomNavigation.tsx

​
Props

​
className
string
Optional CSS classes to apply to the component wrapper

​
Interface

src/components/BottomNavigation.tsx
interface BottomNavigationProps {
  className?: string;
}

​
Features

  • Responsive Design: Full-width on mobile, styled card on tablet/desktop
  • Icon Navigation: Uses the Icon component for consistent iconography
  • Hover Effects: Animated hover states with translation and scaling
  • Solid.js: Client-side interactive component
The component includes three navigation items:
  1. Home (/) - Home icon
  2. Projects (/projects) - Project icon
  3. About (/about) - About icon

​
Usage

---
import { BottomNavigation } from '@components/BottomNavigation';
---

<BottomNavigation client:only="solid-js" />

​
With Custom Styling

<BottomNavigation 
  client:only="solid-js" 
  className="bg-white/95 backdrop-blur"
/>

​
Styling

The component uses Tailwind CSS classes: 
// Container styling
clsx(
  "flex w-full justify-evenly",
  "md:mx-auto md:mb-5 md:max-w-prose md:rounded-lg md:border md:shadow-md",
  "border-t border-gray-300/50"
)

// Navigation item styling
clsx(
  "my-1 px-3 py-2",
  "rounded-md transition-all",
  "hover:bg-gray-200/25 hover:backdrop-blur",
  "hover:-translate-y-2 hover:scale-125"
)
The internal NavigationItem component handles individual navigation links:
src/components/BottomNavigation.tsx
interface NavigationItemProps {
  icon: JSX.Element;
  label: string;
  href: string;
  className?: string;
}
​
icon
JSX.Element
required
Icon element to display (typically from Icon component)
​
label
string
required
Text label to display below the icon
​
href
string
required
Navigation link destination
​
className
string
Optional CSS classes

​
Responsive Behavior

  • Full-width layout
  • Border top only
  • Fixed to bottom of viewport (when positioned)
  • Items evenly distributed

​
Animation

Hover interactions include:
  • Background: Semi-transparent gray with backdrop blur
  • Transform: Translates upward by 8px (-translate-y-2)
  • Scale: Increases size by 25% (scale-125)
  • Transition: Smooth transition-all animation

Icon Component

Icon library used for navigation items

Navigation

Main header navigation component

Build docs developers (and LLMs) love

Get started for freeTalk to us