0.1.0 • Public • Published


    Header component for projects based on antd library


    Use <Header /> component in your app route to show app-wide tools and navigation menu button.


      onSwitchSider={() => this.setState({ isSiderCollapsed: !isSiderCollapsed })}
      navMenu={<Sider />}

    Will render header with navigation menu button only.

    Feedback button

        apiUrl: 'myApi/bugs',
        supportEmail: 'support@example.com'

    Will render feedback button with name taken from App.header.techSupport ('Support' by default).
    When clicked will show Bug Reporter form. You can define translations for Bug Reporter form using these ids:

    id: 'BugReporter.placeholder', defaultMessage: 'Leave us a message',
    id: 'BugReporter.success', defaultMessage: 'Your message has been sent',
    id: 'BugReporter.send', defaultMessage: 'Send',
    id: 'BugReporter.help', defaultMessage: 'Don’t forget to describe what you did, what you saw happened and what you expected to happen. Please mention how critical it is.',
    id: 'BugReporter.requiredWarning', defaultMessage: 'Please leave us a message',
    id: 'BugReporter.sendError', defaultMessage: 'Error sending the message',
    id: 'BugReporter.contactUs', defaultMessage: 'If you have problems leaving a message you can contact us via email directly:'

    Locale selector

        onSwitchLocale: l => console.info('locale switch call', l),
        locales: { en: { name: 'English' }, es: { name: 'Espanol' } },

    Will render locale selector dropdown where user can select app locale.

    Profile menu

        onProfilePageClick: () => console.info('go to profile page'),
        onSignOutClick: () => console.info('sign out'),
        username: 'John Doe',

    Will render profile menu dropdown titled by username. The dropdown will have two items: 'My profile' and 'Sign out'. They could be translated by declaring these ids:

    id: 'App.header.signOut', defaultMessage: 'Sign Out',
    id: 'App.header.myProfile', defaultMessage: 'My Profile'

    Custom content

    <Header ...>
      <div>Custom content</div>

    Will render custom content in the center of the header.

    Compact view


    Will render buttons in compact mode: no text, icons only.

    Sider popover


    Will render navigation menu as a popover



    Prop Type Default Description
    hasSider bool false If true show Sider button
    navMenu element undefined Content to show in the navigation popover
    onSwitchSider func undefined Fired when the navigation button is clicked
    isSiderCollapsed bool true Affects the navigation button icon
    isSiderPopover bool false If true, the navMenu content will be presented in a popover when the navigation button is clicked
    isCompact bool false If true, will show tools buttons without text, icons only
    extra element or array of elements undefined Show extra components near the buttons
    bugReporter object undefined When defined will show Bug Reporter button
    localeSelector object undefined When defined will show Locale Selector
    profileMenu object undefined When defined will show Profile Menu

    bugReporter props

    Prop Type Description
    *apiUrl string The URL where to post bug report message
    *supportEmail string Email address to show in the bug reporter form

    localeSelector props

    Prop Type Description
    *locales object Object key should be lang name ('en', 'es', ...) and the value is { name } object. name will be displayed in the menu.
    *onSwitchLocale func Called when dropdown item is selected. Receives lang name as an argument.

    profileMenu props

    Prop Type Description
    *username string User name to show as a button title
    *onProfilePageClick func Called when 'My Profile' item is clicked
    *onSignOutClick func Called when 'Sign out' item is clicked


    See CONTRIBUTING.md for how to develop a component.


    npm i @methodexists/ant-header

    DownloadsWeekly Downloads






    Last publish


    • ffab00
    • oluckyman
    • alexeyme