MYDS Logo

    MYDS

    Beta

    Navbar

    The Navbar component establishes a clear navigation menu for users to browse the site.

    Usage

    Import
    import {
      Navbar,
      NavbarLogo,
      NavbarMenu,
      NavbarMenuItem,
      NavbarMenuDropdown,
      NavbarAction,
    } from "@govtechmy/myds-react/navbar";
    Anatomy
    export default () => {
      return (
        <Navbar>
          <NavbarLogo />
          <NavbarMenu>
            <NavbarMenuItem />
            <NavbarMenuDropdown>
              <NavbarMenuItem />
            </NavbarMenuDropdown>
          </NavbarMenu>
          <NavbarActionGroup />
        </Navbar>
      );
    };

    Example

    Props

    PropTypeDefault
    children
    ReactNode
    -
    className
    string
    -
    PropTypeDefault
    children
    ReactNode
    -
    href
    string
    -
    src
    string
    -
    alt
    string
    -
    PropTypeDefault
    children
    string
    -
    PropTypeDefault
    children
    ReactNode
    -
    href
    string
    -
    className
    string
    -
    PropTypeDefault
    children
    ReactNode
    -
    title
    string
    -
    className
    boolean
    -
    PropTypeDefault
    children
    ReactNode
    -

    On this page