Skip to main content

Side Navigation Block

The SideNavigation Component is a fully customizable and accessible side navigation menu built with React and TypeScript. It provides a complete navigation interface with modern design patterns, mobile-responsive behavior, floating and fixed modes, and flexible customization options.

πŸš€ Installation​

npm install @nodeblocks/frontend-side-navigation-block@0.2.0

πŸ“– Usage​

import {SideNavigation} from '@nodeblocks/frontend-side-navigation-block';
function BasicSideNavigation() {
  const [isMenuOpen, setIsMenuOpen] = useState(false);

  const navigationHeader = {
    icon: 'home' as const,
    text: 'Home',
    href: '#home',
  };

  const navigationLinks = [
    {icon: 'dashboard' as const, text: 'Dashboard', href: '#dashboard'},
    {icon: 'shopping_cart' as const, text: 'Products', href: '#products'},
    {icon: 'reorder' as const, text: 'Orders', href: '#orders'},
    {icon: 'settings' as const, text: 'Settings', href: '#settings'},
    {icon: 'help' as const, text: 'Support', href: '#support'},
  ];

  return (
    <SideNavigation
      isFloating={true}
      isMenuOpen={isMenuOpen}
      setIsMenuOpen={setIsMenuOpen}
      header={navigationHeader}
      links={navigationLinks}>
      <SideNavigation.Links />
    </SideNavigation>
  );
}

πŸ”§ Props Reference​

Main Component Props​

PropTypeDefaultDescription
isFloatingbooleanundefinedWhether the navigation should float over content (mobile-style) or be fixed in place
isMenuOpenbooleanundefinedControls whether the navigation menu is open or closed
setIsMenuOpen(isMenuOpen: boolean) => voidRequiredFunction to control the menu open/close state
header{ icon?: IconType; text?: ReactNode; href: string }RequiredHeader link object with optional icon, text content, and href
links{ icon?: IconType; text?: ReactNode; href: string }[]RequiredArray of navigation link objects with optional icons
childrenBlocksOverrideundefinedFunction to override default blocks or add custom navigation components

Sub-Components​

The SideNavigation component provides several sub-components. All sub-components receive their default values from the main component's context and can override these values through props.

SideNavigation.Overlay​

PropTypeDefaultDescription
childrenReactNodeundefinedCustom content for the overlay
setIsMenuOpen(isMenuOpen: boolean) => voidFrom contextFunction to control menu state when overlay is clicked

Note: This component inherits all HTML div element props.

SideNavigation.MenuButton​

PropTypeDefaultDescription
childrenReactNode<Icon icon="menu" />Custom content for the menu button (defaults to hamburger icon)
isMenuOpenbooleanFrom contextCurrent menu open state
setIsMenuOpen(isMenuOpen: boolean) => voidFrom contextFunction to toggle menu state

Note: This component inherits all HTML button element props.

PropTypeDefaultDescription
childrenReactNodeDefault links renderingCustom content to override default links rendering
header{ icon?: IconType; text?: ReactNode; href: string }From contextHeader link object to display
links{ icon?: IconType; text?: ReactNode; href: string }[]From contextArray of navigation links to display

Note: This component inherits all HTML nav element props.

πŸ”§ TypeScript Support​

Full TypeScript support with comprehensive type definitions:

import {SideNavigation} from '@nodeblocks/frontend-side-navigation-block';
import {ComponentProps, ReactNode} from 'react';

// Main component interface
interface SideNavigationProps extends Omit<ComponentProps<'aside'>, 'children'> {
  isFloating?: boolean;
  isMenuOpen?: boolean;
  setIsMenuOpen: (isMenuOpen: boolean) => void;
  header: { icon?: string; text?: ReactNode; href: string };
  links: { icon?: string; text?: ReactNode; href: string }[];
}

// Usage example with comprehensive typing
interface CustomNavigationData {
  headerItem: { icon?: string; text?: ReactNode; href: string };
  menuItems: { icon?: string; text?: ReactNode; href: string }[];
  isResponsive: boolean;
  onMenuToggle: (isOpen: boolean) => void;
}

const NavigationComponent = ({headerItem, menuItems, isResponsive, onMenuToggle}: CustomNavigationData) => {
  const [isOpen, setIsOpen] = useState(false);

  const handleMenuToggle = (isMenuOpen: boolean) => {
    setIsOpen(isMenuOpen);
    onMenuToggle(isMenuOpen);
  };

  return (
    <SideNavigation
      isFloating={isResponsive}
      isMenuOpen={isOpen}
      setIsMenuOpen={handleMenuToggle}
      header={headerItem}
      links={menuItems}
      onClick={e => console.log('Navigation clicked')}>
      <SideNavigation.Links />
    </SideNavigation>
  );
};

Built with ❀️ using React, TypeScript, and modern web standards.