tessl/npm-reactstrap

React Bootstrap components providing stateless Bootstrap 5 components for React applications

—

Pending

Overview

Eval results

Files

Navigation Components

Name: tessl/npm-reactstrap
Author: tessl

Navigation bars, breadcrumbs, and navigation list components for creating site navigation and hierarchical navigation structures.

Capabilities

Navbar

Bootstrap navigation bar component that provides responsive navigation headers with support for branding, navigation links, and other components.

/**
 * Bootstrap navigation bar component
 * @param props.light - Use light navbar theme
 * @param props.dark - Use dark navbar theme
 * @param props.fixed - Fix navbar position ('top' or 'bottom')
 * @param props.sticky - Make navbar sticky ('top')
 * @param props.color - Background color theme
 * @param props.expand - Responsive expansion breakpoint (true, false, 'sm', 'md', 'lg', 'xl')
 * @param props.tag - HTML element to render as (default: 'nav')
 * @param props.className - Additional CSS classes
 * @param props.cssModule - CSS Module mapping object
 * @param props.children - Navigation content and components
 */
function Navbar(props: {
  light?: boolean;
  dark?: boolean;
  fixed?: 'top' | 'bottom';
  sticky?: 'top';
  color?: string;
  expand?: boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
  tag?: React.ElementType;
  className?: string;
  cssModule?: object;
  children?: React.ReactNode;
}): JSX.Element;

NavbarBrand

Navbar brand/logo component for displaying company or site branding within the navbar.

/**
 * Navbar brand/logo component
 * @param props.tag - HTML element to render as (default: 'a' if href, 'span' otherwise)
 * @param props.href - Link URL when rendered as anchor
 * @param props.className - Additional CSS classes
 * @param props.cssModule - CSS Module mapping object
 * @param props.children - Brand content (text, logo, etc.)
 */
function NavbarBrand(props: {
  tag?: React.ElementType;
  href?: string;
  className?: string;
  cssModule?: object;
  children?: React.ReactNode;
}): JSX.Element;

NavbarToggler

Collapsible navbar toggle button for mobile navigation menu display.

/**
 * Navbar toggle button for collapsible navigation
 * @param props.type - Button type (default: 'button')
 * @param props.tag - HTML element to render as (default: 'button')
 * @param props.className - Additional CSS classes
 * @param props.cssModule - CSS Module mapping object
 */
function NavbarToggler(props: {
  type?: string;
  tag?: React.ElementType;
  className?: string;
  cssModule?: object;
  [key: string]: any;
}): JSX.Element;

NavbarText

Text wrapper component for non-interactive text content within navbars.

/**
 * Navbar text wrapper for non-interactive content
 * @param props.tag - HTML element to render as (default: 'span')
 * @param props.className - Additional CSS classes
 * @param props.cssModule - CSS Module mapping object
 * @param props.children - Text content
 */
function NavbarText(props: {
  tag?: React.ElementType;
  className?: string;
  cssModule?: object;
  children?: React.ReactNode;
}): JSX.Element;

Nav

Navigation list component for creating lists of navigation links and content.

/**
 * Navigation list component
 * @param props.tabs - Apply tab styling
 * @param props.pills - Apply pill/button styling
 * @param props.vertical - Stack navigation vertically (true or breakpoint string)
 * @param props.horizontal - Align navigation horizontally ('center', 'end')
 * @param props.justified - Make nav items fill available width
 * @param props.fill - Fill and justify nav items
 * @param props.navbar - Apply navbar-specific styling
 * @param props.card - Apply card-specific navigation styling
 * @param props.tag - HTML element to render as (default: 'ul')
 * @param props.className - Additional CSS classes
 * @param props.cssModule - CSS Module mapping object
 * @param props.children - NavItem components and other content
 */
function Nav(props: {
  tabs?: boolean;
  pills?: boolean;
  vertical?: boolean | string;
  horizontal?: 'center' | 'end';
  justified?: boolean;
  fill?: boolean;
  navbar?: boolean;
  card?: boolean;
  tag?: React.ElementType;
  className?: string;
  cssModule?: object;
  children?: React.ReactNode;
}): JSX.Element;

NavItem

Navigation item wrapper component for individual navigation items.

/**
 * Navigation item wrapper
 * @param props.tag - HTML element to render as (default: 'li')
 * @param props.active - Mark item as active/current
 * @param props.className - Additional CSS classes
 * @param props.cssModule - CSS Module mapping object
 * @param props.children - Navigation link or other content
 */
function NavItem(props: {
  tag?: React.ElementType;
  active?: boolean;
  className?: string;
  cssModule?: object;
  children?: React.ReactNode;
}): JSX.Element;

NavLink

Navigation link component for creating clickable navigation links.

/**
 * Navigation link component
 * @param props.disabled - Disable the link
 * @param props.active - Mark link as active/current
 * @param props.href - Link URL
 * @param props.tag - HTML element to render as (default: 'a')
 * @param props.innerRef - Ref forwarding
 * @param props.className - Additional CSS classes
 * @param props.cssModule - CSS Module mapping object
 * @param props.children - Link text/content
 */
function NavLink(props: {
  disabled?: boolean;
  active?: boolean;
  href?: string;
  tag?: React.ElementType;
  innerRef?: React.Ref;
  className?: string;
  cssModule?: object;
  children?: React.ReactNode;
  [key: string]: any;
}): JSX.Element;

Breadcrumb

Bootstrap breadcrumb navigation component for showing hierarchical navigation paths.

/**
 * Bootstrap breadcrumb navigation
 * @param props.tag - HTML element for wrapper (default: 'nav')
 * @param props.listTag - HTML element for list (default: 'ol')
 * @param props.className - Additional CSS classes for wrapper
 * @param props.listClassName - Additional CSS classes for list
 * @param props.cssModule - CSS Module mapping object
 * @param props.children - BreadcrumbItem components
 */
function Breadcrumb(props: {
  tag?: React.ElementType;
  listTag?: React.ElementType;
  className?: string;
  listClassName?: string;
  cssModule?: object;
  children?: React.ReactNode;
}): JSX.Element;

BreadcrumbItem

Individual breadcrumb item component for creating breadcrumb navigation links.

/**
 * Individual breadcrumb item
 * @param props.active - Mark item as active/current (no link)
 * @param props.tag - HTML element to render as (default: 'li')
 * @param props.href - Link URL for non-active items
 * @param props.className - Additional CSS classes
 * @param props.cssModule - CSS Module mapping object
 * @param props.children - Breadcrumb text/content
 */
function BreadcrumbItem(props: {
  active?: boolean;
  tag?: React.ElementType;
  href?: string;
  className?: string;
  cssModule?: object;
  children?: React.ReactNode;
  [key: string]: any;
}): JSX.Element;

Usage Examples

Complete Navbar Example

import { 
  Navbar, 
  NavbarBrand, 
  NavbarToggler, 
  Nav, 
  NavItem, 
  NavLink,
  Collapse 
} from 'reactstrap';

function NavigationBar() {
  const [isOpen, setIsOpen] = useState(false);
  const toggle = () => setIsOpen(!isOpen);

  return (
    <Navbar color="light" light expand="md">
      <NavbarBrand href="/">My App</NavbarBrand>
      <NavbarToggler onClick={toggle} />
      <Collapse isOpen={isOpen} navbar>
        <Nav className="me-auto" navbar>
          <NavItem>
            <NavLink href="/products/">Products</NavLink>
          </NavItem>
          <NavItem>
            <NavLink href="/about/">About</NavLink>
          </NavItem>
          <NavItem>
            <NavLink href="/contact/">Contact</NavLink>
          </NavItem>
        </Nav>
      </Collapse>
    </Navbar>
  );
}

Tab Navigation

import { Nav, NavItem, NavLink, TabContent, TabPane } from 'reactstrap';

function TabNavigation() {
  const [activeTab, setActiveTab] = useState('1');

  return (
    <div>
      <Nav tabs>
        <NavItem>
          <NavLink
            className={activeTab === '1' ? 'active' : ''}
            onClick={() => setActiveTab('1')}
          >
            Tab 1
          </NavLink>
        </NavItem>
        <NavItem>
          <NavLink
            className={activeTab === '2' ? 'active' : ''}
            onClick={() => setActiveTab('2')}
          >
            Tab 2
          </NavLink>
        </NavItem>
      </Nav>
      <TabContent activeTab={activeTab}>
        <TabPane tabId="1">
          <p>Content for Tab 1</p>
        </TabPane>
        <TabPane tabId="2">
          <p>Content for Tab 2</p>
        </TabPane>
      </TabContent>
    </div>
  );
}

Pill Navigation

function PillNavigation() {
  return (
    <Nav pills>
      <NavItem>
        <NavLink href="#" active>Active Pill</NavLink>
      </NavItem>
      <NavItem>
        <NavLink href="#">Pill Link</NavLink>
      </NavItem>
      <NavItem>
        <NavLink href="#" disabled>Disabled Pill</NavLink>
      </NavItem>
    </Nav>
  );
}

Vertical Navigation

function VerticalNavigation() {
  return (
    <Nav vertical pills>
      <NavItem>
        <NavLink href="#" active>Dashboard</NavLink>
      </NavItem>
      <NavItem>
        <NavLink href="#">Profile</NavLink>
      </NavItem>
      <NavItem>
        <NavLink href="#">Messages</NavLink>
      </NavItem>
      <NavItem>
        <NavLink href="#">Settings</NavLink>
      </NavItem>
    </Nav>
  );
}

Breadcrumb Navigation

import { Breadcrumb, BreadcrumbItem } from 'reactstrap';

function BreadcrumbNavigation() {
  return (
    <Breadcrumb>
      <BreadcrumbItem>
        <a href="/">Home</a>
      </BreadcrumbItem>
      <BreadcrumbItem>
        <a href="/products/">Products</a>
      </BreadcrumbItem>
      <BreadcrumbItem>
        <a href="/products/electronics/">Electronics</a>
      </BreadcrumbItem>
      <BreadcrumbItem active>
        Smartphones
      </BreadcrumbItem>
    </Breadcrumb>
  );
}

Dark Navbar

function DarkNavbar() {
  return (
    <Navbar dark color="dark" expand="md">
      <NavbarBrand href="/">Dark Theme</NavbarBrand>
      <Nav className="me-auto" navbar>
        <NavItem>
          <NavLink href="/home/">Home</NavLink>
        </NavItem>
        <NavItem>
          <NavLink href="/features/">Features</NavLink>
        </NavItem>
      </Nav>
    </Navbar>
  );
}

Install with Tessl CLI