Drop-down menu avatar

Usage

Usage guidelines for this component are being developed and will be available in a future release.

Code

<DropdownMenuAvatar id="basicExample">
  <DropdownMenuHeader title="Heading">
    This is a header
  </DropdownMenuHeader>
  <DropdownMenuLink
    onClick={() => {}}
    to="/example"
  >
    First menu item (internal link)
  </DropdownMenuLink>
  <DropdownMenuSeparator />
  <DropdownMenuLink
    href="http://example.com"
    onClick={() => {}}
  >
    Second menu item (external link)
  </DropdownMenuLink>
</DropdownMenuAvatar>

Import statement

import { DropdownMenuAvatar } from '@jutro/components';

Component contract

Make sure to understand the Design System components API surface, and the implications and trade-offs. Learn more in our introduction to the component API.

Properties

idrequired: Type
string
Description
The identifier used for the drop-down menu component.
alignRight: Type
bool
Description
If set to true, items are aligned to the right edge of the menu.
authLinksClassName: Type
string
Description
Additional CSS class for the drop-down menu avatar authentication links.
autoFocus: Type
bool
Description
If set to true, the first menu item gets focused after opening the drop-down menu.
children: Type
node
Description
The component children, wrapped by the drop-down menu avatar component. This can include DropdownMenu components.
className: Type
string
Description
Additional component styling class name which is passed to the component.
dropdownClassName: Type
string
Description
Optional CSS class for the drop-down menu.
dropUp: Type
bool
Description
If set to true, the menu appears above the trigger component.
headerClassName: Type
string
Description
Additional CSS class for the drop-down menu avatar header.
icon: Type
string | Icon
Description
An Icon component to render on the component. The value must be an Icon component or the icon's name. For example, CheckIcon or 'gw-check'.
imageSource: Type
string
Description
The path to a user image, preferentially shown before user initials or icon.
isOpen: Type
bool
Description
If set to true, the menu is currently visible to the user.
messageProps: Type
{ userAvatar: intlMessageShape }
Description
The message props to generate an error message or aria-label.
onBeforeLogout: Type
(() => void | Promise<void>) | undefined
Description
Callback to be called before Okta logout.
separatorClassName: Type
string
Description
Optional CSS class for the drop-down menu separator.
showImageBorder: Type
bool
Description
If set to true, displays the image border.
subtitle: Type
IntlMessageShape
Description
The menu header subtitle text.
title: Type
IntlMessageShape
Description
The menu header title text.
useAuthInfo: Type
bool
Description
If set to true, displays header information from Okta (if available) and the logout menu link.
username: Type
string
Description
The user's first and last name, used as the component's alt text and to display initials if no image is selected.

Hooks

No hooks are available for drop-down menu avatar.

Translation keys

The drop-down menu avatar component defines the following translation keys:

Key	Used for
jutro-router.DropdownMenu.Logout	`aria-label` value for a logout button.
jutro-router.DropdownMenu.ProfileMenu	`aria-label` value for a profile button.

Escape hatches

For more information, see our documentation about escape hatches.

Examples

Check out the Usage section for details about how to design a drop-down menu avatar properly, and the different configuration options available.

A drop-down menu avatar is a type of avatar that functions like a drop-down menu button. When a user clicks the avatar, it will open a drop-down menu that is defined using the drop-down child components documented on the drop-down menu button page.

<DropdownMenuAvatar id="basicExample">
  <DropdownMenuHeader title="Heading">
    <DropdownMenuLink
      onClick={() => {}}
      to="/example"
    >
      Menu item in a header (internal link)
    </DropdownMenuLink>
  </DropdownMenuHeader>
  <DropdownMenuLink
    onClick={() => {}}
    to="/example"
  >
    First menu item (internal link)
  </DropdownMenuLink>
  <DropdownMenuSeparator />
  <DropdownMenuLink
    href="http://example.com"
    onClick={() => {}}
  >
    Second menu item (external link)
  </DropdownMenuLink>
</DropdownMenuAvatar>

The icon property allows you to use any Jutro icon as the default icon. For more information about Jutro icons, see the Icon component page.

import { HelpIcon } from '@jutro/icons';

<DropdownMenuAvatar 
  id="iconExample"
  icon={HelpIcon}>
  ...
</DropdownMenuAvatar>

The avatar component displays any arbitrary image with the imageSource property. The image is resized to fit within the circle. In the following example, the source is a 32x32px square image that is resized to fit within the default circle.

<DropdownMenuAvatar 
  id="imageExample"
  imageSource='/path/to/image'
>
  ...
</DropdownMenuAvatar>

You can set the avatar component to display the authentication client's content using the useAuthInfo property.

<DropdownMenuAvatar
  id="authExample"
  useAuthInfo
>
  ...
</DropdownMenuAvatar>

The username property is used as alt text. Additionally, if no imageSource is set, the initials from the username string are displayed instead of an icon.

<DropdownMenuAvatar
  id="usernameExample1"
  username="John Doe"
  imageSource='/path/to/image'
>
  ...
</DropdownMenuAvatar>
<DropdownMenuAvatar
  username="John Doe"
  id="usernameExample2"
  icon={HelpIcon}
>
  ...
</DropdownMenuAvatar>
<DropdownMenuAvatar
  username="John Doe"
  id="usernameExample3"
>
  ...
</DropdownMenuAvatar>

Drop-down menu avatar

Usage

Code

Import statement

Component contract

Properties

`id`required

`alignRight`

`authLinksClassName`

`autoFocus`

`children`

`className`

`dropdownClassName`

`dropUp`

`headerClassName`

`icon`

`imageSource`

`isOpen`

`messageProps`

`onBeforeLogout`

`separatorClassName`

`showImageBorder`

`subtitle`

`title`

`useAuthInfo`

`username`

Hooks

Translation keys

Escape hatches

Examples

Basic drop-down menu avatar