Mobile header

Examples
Typescript ❤️

A React component rendering a mobile header

Install
yarn add @atlaskit/mobile-header
npm
@atlaskit/mobile-header
Source
Bitbucket
Bundle
unpkg.com
Changelog
Latest

7.0.4

Patch Changes

  • #120533 f1bec731e278f - Adds a sideEffects field to ensure this package does not have Compiled styles tree-shaken in the future to avoid an accidental regression.

    This is related to https://community.developer.atlassian.com/t/rfc-73-migrating-our-components-to-compiled-css-in-js/85953

Note: This component is designed for internal Atlassian development.

External contributors will be able to use this component but will not be able to submit issues.

The Mobile Header is a way to render a header that hides the Navigation and Sidebar from smaller screens and allows the user to view them by tapping/clicking icons.

Usage

import MobileHeader from '@atlaskit/mobile-header';

Basic

Mobile Header Props

navigation function

isOpen => react.ReactNode

sidebar function

isOpen => react.ReactNode

onNavigationOpen function

() => undefined

onDrawerClose function

() => undefined

drawerState union = ""

One of
"navigation",
"sidebar",
"none",
string

secondaryContent import

react.ReactNode

pageHeading import = ""

react.ReactNode

menuIconLabel string = "Menu"

customMenu import

react.ReactNode

topOffset number = 0