Happeo UIkit logo
Components
Home
Packages
AlertsAvatarBannersBreadcrumbsButtonsButtonsDS3CardColor PickerColorsContent RendererEmojisFile IconFile PickerForm ElementsIcons AppIcons FileIcons FlagIcons LegacyIcons SymbolImage CarouselImage CropperImage GridLayoutListLoadersMenusModalsNavigationTabsTabs PropsSide NavigationSide Navigation PropsThemeToastTypography

Navigation

Name
@happeouikit/navigation
Latest
3.0.0
License
MIT
Installation
yarn add @happeouikit/navigation
Links
    Dependencies (5)
    • @happeouikit/colors@^1.0.4
    • @happeouikit/icons@^2.0.5
    • @happeouikit/layout@^1.1.11
    • @happeouikit/theme@^1.0.5
    • @happeouikit/typography@^1.0.10

    Tabs

    Tabs are used to quickly navigate between views within the same context. No more than six tabs is recommended. This maintains an uncluttered UI and reduces cognitive load for users. If more than six tabs are needed, consider other navigation patterns, such as a side-nav.

    Component has following action types to do navigation:

    • Navigate to url on click
    • Execute a function on click
    • Both above

    Label tab - primary - react-router navigation

    Label tab - primary - a tag href navigation

    Label tab - both url navigation and custom handler

    Label tab - add count near label and notifications for primary variant

    Label tab - secondary with custom styles

    Label tab - secondary with transparent background

    Label tab with notification badge

    Label tab with icon

    Label tab - onCustomClick

    Label tab - custom active tab

    Label tab -- scrollToActive enabled

    Tabs Props

    variant
    "primary" │ "secondary"
    "primary"
    direction
    "row" │ "column"
    "row"
    customStyles
    objectOf
    undefined
    active
    number
    0
    transparent
    bool
    false
    scrollToActive
    bool
    false
    children
    Array<{ "props": "{\n \"id\": \"number │ string\",\n \"label\": \"string\",\n \"routePath\": \"string\",\n \"href\": \"string\",\n \"onCustomClick\": \"Function\",\n \"icon\": \"node\",\n \"notification\": \"number │ string\",\n \"count\": \"number\",\n \"data-tracker\": \"string\"\n}" }> │ node
    undefined

    Side Navigation

    Side Navigation Props

    menuItems
    Array<{ "name": "string", "url": "string", "component": "elementType", "exact": "Boolean", "id": "string │ number", "dataTracker": "string" }>
    []
    withUrlParameters
    bool
    false