Header

Headers are compositions that extend standard navbar functionalities.

Author

• @author Hariharan [email protected]

Link

Story Book Link Header

PlayGround

Try it have a fun codeBox

Installation

npm i @licuido-ui/ui_header

Import component

import { Header } from '@licuido-ui/ui_header';

Usage

<Header headerComponentList={[]} subHeaderComponentList={[]} />

Image

Sample Code

<Layout
  appBarProps={{}}
  appBarStyle={{}}
  toolBarStyle={{}}
  toolBarProps={{}}
  mobileMenuIconStyle={{}}
  subHeaderStyle={{}}
  headerComponentList={
    [
      {
        order: 1,
        component: <>Logo</>,
        style: {},
        mobileScreenActive: true,
      },
      {
        order: 2,
        component: <>Profile</>,
        style: {},
      },
      {
        order: 3,
        component: <>Menu</>,
        style: {},
      },
    ]
  }
  subHeaderComponentList={
    [
      {
        order: 1,
        component: <>Secondary Logo</>,
        style: {},
        mobileScreenActive: true,
      },
      {
        order: 3,
        component: <>Secondary Profile</>,
        style: {},
      },
      {
        order: 2,
        component: <>Secondary Menu</>,
        style: {},
      },
    ]
  }
/>

Props

| Name | Description | Default | Control | | ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | -------------------------- | | id | string | string | string | | headerComponentList* | order: number: component: React.ReactNode: style?: SxProps; mobileScreenActive?: boolean;menuList[] | - | [ ] | - | subHeaderComponentList : [0 : {...} 4 keys1 : {...} 3 keys2 : {...} 3 keys] | | appBarProps | { classes?: Partial<AppBarClasses>; color?: "primary" | "secondary" | "inherit" | "default" | "transparent"; enableColorOnDark?: boolean; position?: "fixed" | "absolute" | "sticky" | "static" | "relative"; sx?: SxProps<...>; } & Omit<...> & CommonProps & Omit<...> | - | appBarProps : {} | | appBarStyle | SxProps<{}> | - | appBarStyle : {} | | toolBarStyle | SxProps<{}> | - | toolBarStyle : {} | | toolBarProps | { children?: ReactNode; classes?: Partial<ToolbarClasses>; disableGutters?: boolean; variant?: "dense" | "regular"; sx?: SxProps<Theme>; } & CommonProps & Omit<...> | - | toolBarProps : {} | | mobileMenuIconStyle | SxProps<{}> | - | mobileMenuIconStyle : {} | | subHeaderStyle | SxProps<{}> | - | subHeaderStyle : {} | | className | string | - | Set string | | sx | SxProps<Theme> | - | Set object |