Navigation Screen A
Fullscreen navigation, mobile menu screen.
Preview
LOGO
Designed by us
Tw. Ig. Tk.
Code
import React, { useState } from "react"; import styles from "./nav-screen-a.module.css"; type NavigationItemType = { icon?: React.ReactNode; title: string; slug: string; showTitle?: boolean; href?: string; onClick?: () => void; }; type Props = { className?: string; headerLeftElement?: React.ReactNode; headerRightElement?: React.ReactNode; navigationItems?: NavigationItemType[]; footerNavigationItems?: NavigationItemType[]; defaultActive?: string; navVerticalAlign?: "top" | "center" | "bottom"; navHorizontalAlign?: "start" | "center" | "end"; footerLeftElement?: React.ReactNode; footerRightElement?: React.ReactNode; // Put additional variants here, then define them in the CSS variant?: "default" | "style-a" | "style-b"; }; export default function NavScreenA({ className, headerLeftElement, headerRightElement, navigationItems, navVerticalAlign, navHorizontalAlign, defaultActive, footerLeftElement, footerRightElement, variant = "default", }: Props) { const [activeSlug, setActiveSlug] = useState(defaultActive); return ( <div className={[ styles["wrapper"], styles[`variant-${variant}`], styles[`nav-align-x-${navHorizontalAlign}`], styles[`nav-align-y-${navVerticalAlign}`], className, ].join(" ")} > <div className={styles["header"]}> <div className={styles["h-left"]}>{headerLeftElement}</div> <div className={styles["h-left"]}>{headerRightElement}</div> </div> <nav className={styles["nav"]}> <div className={styles["nav-list"]}> {navigationItems?.map((item, index) => { const navItemContent = ( <div className={[ styles["nav-item"], activeSlug === item.slug && styles["active"], ].join(" ")} > {item.icon && ( <div className={styles["nav-icon"]}>{item.icon}</div> )} {item.title && ( <div className={[ styles["nav-title"], item.showTitle && styles["show-title"], ].join(" ")} > <span className={styles["main"]}>{item.title}</span> <span className={styles["clone"]} aria-hidden> {item.title} </span> </div> )} </div> ); return ( <div key={item.slug || `item-${index}`}> {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> </nav> <div className={styles["footer"]}> <div className={styles["f-left"]}>{footerLeftElement}</div> <div className={styles["f-right"]}>{footerRightElement}</div> </div> </div> ); }
Design
Figma design file:
Documentation
Properties
Props of the component:
-
className
(string): Specifies the CSS class of the component. -
navigationItems
(Array of NavigationItemType): Specifies the navigation buttons. -
footerNavigationItems
(Array of NavigationItemType): Specifies the footer 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" | "style-a" | "style-b" 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-style-b { --fg-color: #707070; --active-color: #5325ff; --active-icon-color: #5325ff; --icon-wrapper-radius: 1rem; } .variant-style-b .nav-icon-wrapper::before { border: 2px solid var(--active-color); background-color: transparent; }