Navigation A

Navigation menu, menu bar, bottom navigation bar.

Preview

Code

import React, { useState } from "react"; import clsx from "clsx"; import styles from "./navigation-bar-a.module.css"; type NavigationItemType = { icon?: React.ReactNode; title: string; slug: string; showTitle?: boolean; href?: string; onClick?: () => void; }; type Props = { className?: string; items?: NavigationItemType[]; defaultActive?: string; rounded?: "none" | "small" | "medium" | "large" | "full"; // Put additional variants here, then define them in the CSS variant?: "default" | "red"; }; export default function NavigationBarA({ className, items, defaultActive, rounded, variant = "default", }: Props) { const [activeSlug, setActiveSlug] = useState(defaultActive); return ( <div className={clsx( styles["wrapper"], styles[`r-${rounded}`], styles[`variant-${variant}`], className )} > <div className={styles["navs"]}> {items?.map((item, index) => { const navItemContent = ( <div className={clsx( styles["nav-item"], activeSlug === item.slug && styles["active"] )} key={item.slug || `item-${index}`} > {item.icon && ( <div className={styles["nav-icon-wrapper"]}> <div className={styles["nav-icon"]}>{item.icon}</div> </div> )} {item.title && ( <div className={clsx( styles["nav-title"], item.showTitle && styles["show-title"] )} > {item.title} </div> )} </div> ); return ( <> {item.href ? ( <a title={item.title} className={styles["nav-link"]}> {navItemContent} </a> ) : ( <button type="button" title={item.title} onClick={() => { item.onClick && item.onClick(); setActiveSlug(item.slug); }} className={styles["nav-btn"]} > {navItemContent} </button> )} </> ); })} </div> </div> ); }

Design

Figma design file:

Documentation

Properties

Props of the component:

  • className (string): Specifies the CSS class of the component.

  • items (Array of NavigationItemType): Specifies the navigation buttons.

  • defaultActive ( string): Specifies the slug of the default active navigation item.

  • rounded ("none" | "small" | "medium" | "large" | "full"): Specifies the border radius of the frame.

  • variant ("default" | "red" or a customized value): Specifies the color or theme variant of the component. See the "Sample CSS customization" below for an example of usage.

  • onClick (function): Fires when the button is clicked.

NavigationItemType item arguments
  • icon (ReactElement): Specifies the icon element.
  • title (string): Specifies the title text.
  • slug (string): Specifies the reference slug text.
  • showTitle (boolean): Show or hide title.
  • href (string): Specifies the url if the item is a link.
  • onClick (function): Fires when the button is clicked.
Sample CSS customization
.variant-red { --fg-color: #ff2566; --active-color: #ff2566; }