Logo
Chakra-UIReactJsNext.JS
Head

@codecraftkit

Documentation

NavBar

Description#

NavBar component rendered at the top of the page.

Import#

it can be imported from the core.

Code Example

import { NavBar } from "@codecraftkit/core";

or alone.

Code Example

import NavBar  from "@codecraftkit/navbar";

Usage#

Simple Example#

Code Example

function MyApp() {
  const options = {
      menu: [
        {
          href: 'https://chakra-ui.com',
          label: 'Chakra-UI'
        },
        {
          href: 'https://es.reactjs.org/',
          label: 'ReactJs'
        },
        {
          href: 'https://nextjs.org/',
          label: 'Next.JS'
        }
      ]
    }


  return  <NavBar menu={options.menu} w='100%' />
}

With User Session#

Code Example

function MyApp() {
const user = {
  name: 'username',
  lastName: 'lastname',
  img:'https://picsum.photos/200',
  token:'token',
  links:{
    profile: '#'
  }
}


const avatarMenu = [{
  divider:true
}, {
  label:'Link Test',
  action:()=>alert('action')
}, {
  group:'Link Group',
  items:[{
    label:'Link Group 1',
    action:()=>alert('action 1')
  }, {
    label:'Link Group 2',
    action:()=>alert('action 2')
  }]
}]


const logout = () => alert('The user has logout')


const options = {
    menu: [
      {
        href: 'https://chakra-ui.com',
        label: 'Chakra-UI'
      },
      {
        href: 'https://es.reactjs.org/',
        label: 'ReactJs'
      },
      {
        href: 'https://nextjs.org/',
        label: 'Next.JS'
      }
    ]
  }


return  <NavBar
    menu={options.menu}
    session={user}
    logout={logout}
    profileLink={false}
    avatarMenu={avatarMenu}
    w='100%'
/>
}

Notes

- The avatar img will show a loading animation if the user session doesn't have a name - It will use the img field in the user object as the source of the avatar img - The user has to have a valid token to show the default items - The profile link is shown by default - `avatarMenu` adds items between the default ones

Using left and right actions#

Code Example

function MyApp(){
  const options = {
      leftAction: {
        icon: <MdApps />,
        styles: { fontSize: '35px' },
        label: 'Access',
        component: <BoxContainer noBorder title='Access'>
          Left Action
        </BoxContainer>
      },
      menu: [
        {
          href: 'https://chakra-ui.com',
          label: 'Chakra-UI'
        },
        {
          href: 'https://es.reactjs.org/',
          label: 'ReactJs'
        },
        {
          href: 'https://nextjs.org/',
          label: 'Next.JS'
        }
      ],
      rightActions: [
        {
          label: 'Our Team',
          icon: <FaUsers/>,
          component: <BoxContainer noBorder title='Our Team'>
            <Box h="350px">
              <CustomScroll heightRelativeToParent="100%">
                Right Action with Scroll
              </CustomScroll>
            </Box>
          </BoxContainer>
        }
      ]
    }


  return  <NavBar
      // logo={options.logo}
      menu={options.menu}
      leftAction={options.leftAction || undefined}
      rightActions={options.rightActions}
      w='100%'
  />
}

Items Example#

Code Example

const leftAndRightActionsExample = [
  {
    label: 'Example 1',
    href: 'https://chakra-ui.com',
  },
  {
    label: 'Example 2',
    href: 'https://chakra-ui.com',
    isExternal:true
  },
  {
    label: 'Example 3',
    action: () => alert('action')
  }, {
    label: 'Example 4',
    action: () => alert('action'),
    icon: <FaUsers/>,
  }, {
    label: 'Example Group',
    icon: <FaUsers/>,
    component: <BoxContainer noBorder title='Example Group'>
      <Box h="350px">
        <CustomScroll heightRelativeToParent="100%">
          Right Action with Scroll
        </CustomScroll>
      </Box>
    </BoxContainer>
  }, {
    //label: 'Example Group',
    icon: <FaUsers/>,
    subItems: [
      {
        href: 'https://chakra-ui.com',
        label: 'Chakra-UI'
      },
      {
        href: 'https://es.reactjs.org/',
        label: 'ReactJs'
      },
      {
        href: 'https://nextjs.org/',
        label: 'Next.JS'
      },
    ]
  }
]


const avatarItemsExample = [
  {
    label: 'Example 1',
    href: 'https://chakra-ui.com',
  },
  {
    label: 'Example 2',
    action: () => alert('action')
  },
  {
    group: 'Link Group',
    items: [{
      label: 'Link Group 1',
      action: () => alert('action 1')
    }, {
      label: 'Link Group 2',
      action: () => alert('action 2')
    }]
  },
  {
    divider: true
  },
]

Props#

name

type

required

default

description

logo

Component

no

Component to use for the app logo

menu

array<objects>

no

Items shown in the right side of the logo

rightActions

array<objects>

no

Items shown in the left side of the avatar image

leftAction

array<objects>

no

Items shown in the left side of the logo

leftComponent

Component

no

Component shown in the right side of the logo, useful for inputs searches

rightComponent

Component

no

Component shown in the right side next to the right actions

avatarMenu

array<objects>

no

Adds items between the default ones

session

object

no

Current logged user

logout

function

no

handle logout function

profileLink

Boolean

no

true

Show or hide the profile link

languageSelect

Component

no

This prop is mean to be used with the hook useLanguageSelect to change the language context

profilesSelect

Boolean

no

Show or hide the profile select

getSession

Component

no, unless profilesSelect is true

Prop to fecth the user session

skipProfilePageReload

Boolean

no

Avoid reload the page on profile change

...rest

chakra style <props>

no

props to style the input itself, https://chakra-ui.com/docs/features/style-props