Whether nav is rendered on the server.

Whether to enable SSR placeholder replacement.

Describes the specific role of this navigation component for users viewing the page with a screen reader. Differentiates from other navigation components on a page.

Label used for the overflow menu button tooltip.

Slot for the primary actions.

Slot for the app switcher.

Slot for the create call to action button.

Slot for the help button.

Slot for the notification button.

Slot for the product home logo which renders a product's brand.

Slot for the profile button.

Slot for the search textbox.

Slot for the settings button.

Slot for the sign in button.

A testId prop is provided for specified elements, which is a unique string that appears as a data attribute data-testid in the rendered code, serving as a hook for automated tests.

Will set these elements when defined:

- Header element - `{testId}-header`
- Primary actions container - `{testId}-primary-actions`
- Secondary actions container - `{testId}-secondary-actions`
- Overflow menu popup - `{testId}-overflow-menu-popup`
- Overflow menu button - `{testId}-overflow-menu-trigger`

Slow and discouraged custom theme API

Allows for overriding the component used to render the button. This is primarily intended for compatibility with custom routing libraries when using the href prop. For further usage information, refer to the documentation for button. @example

<Settings
  component={CustomRouterLink}
  href="/path/to/url"
/>

If wanting to link to another page you can define the href.

Unique id for the button.

Causes the button to be disabled.

Makes the element appear selected.

Adds a label to the button for users of assistive technologies.

Handler called when the button loses focus.

On click handler. Second argument is the instrumented analytics event. See @atlaskit/analytics-next for analyticsEvent type information

Handler called when the button gains focus.

Called when the mouse is initially clicked on the element.

Called when the mouse enters the element container.

Called when the mouse leaves the element container.

Handler for the mouse up event.

Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref).

@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}

If defining href you may want to define target as well.

A testId prop is provided for specified elements, which is a unique string that appears as a data attribute data-testid in the rendered code, serving as a hook for automated tests

Text that will be displayed in the tooltip when hovered or focused on the button.

Provide an accessible label, often used by screen readers.

Href to be passed to product home. Will add an interactive look and feel when defined.

The product icon. Expected to be an Icon from the Atlaskit Logo package. Visible on smaller screen sizes.

The product logo, visible on larger screen sizes.

Maximum width in pixel, that logo can acquire. Defaults to 260px.

Optional onClick handler.

Optional mouseDown handler.

Name of the site that appears next to the logo.

A testId prop is provided for specified elements, which is a unique string that appears as a data attribute data-testid in the rendered code, serving as a hook for automated tests.

Will set these elements when defined:

- Root element of the component - `{testId}-container`
- Product logo shown at large screen sizes - `{testId}-logo`
- Product icon shown at small screen sizes - `{testId}-icon`
- Site title - `{testId}-site-title`

Href to be passed to product home. Will add an interactive look and feel when defined.

Alt text for the icon that is displayed on small viewports.

Url for the icon that is displayed on small viewports.

Alt text for the icon that is displayed on large viewports.

Maximum width of the logo, in pixels. Defaults to 260px.

Url for the icon that is displayed on large viewports.

Optional onClick handler.

Optional mouseDown handler.

Name of the site that appears next to the logo.

A testId prop is provided for specified elements, which is a unique string that appears as a data attribute data-testid in the rendered code, serving as a hook for automated tests.

Will set these elements when defined:

- Root element of the component - `{testId}-container`
- Product logo shown at large screen sizes - `{testId}-logo`
- Product icon shown at small screen sizes - `{testId}-icon`
- Site title - `{testId}-site-title`

Additional information to be included in the context of analytics events that come from button.

Set the button to autofocus on mount.

Text content to be rendered in the button.

Add a classname to the button.

Allows for overriding the component used to render the button. This is primarily intended for compatibility with custom routing libraries when using the href prop.

For further usage information, refer to the documentation for button.

@example

<Settings
  component={CustomRouterLink}
  href="/path/to/url"
/>

Provides a URL that's used when the button is a link styled as a button.

Places an icon within the button, after the button's text.

Places an icon within the button, before the button's text.

An optional name used to identify this component to press listeners. For example, interaction tracing. For more information, see UFO integration into Design System components.

Set if the button is disabled.

Will set the appearance of the button to look highlighted.

Change the style to indicate the button is selected.

Handler called on blur.

On click handler. See @atlaskit/analytics-next for analyticsEvent type information

Handler called on focus.

Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref).

@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}

Display a keyboard shortcut in the tooltip.

Keys will be displayed as individual keyboard key segments after the tooltip content.

Note: it will only be used if the tooltip prop is also provided.

Option to fit button width to its parent width.

Set the amount of padding in the button.

Pass target down to the button. If a href is provided, this will be a semantic link styled as a button.

A testId prop is provided for specified elements, which is a unique string that appears as a data attribute data-testid in the rendered code, serving as a hook for automated tests. A testId prop is provided for specified elements, which is a unique string that appears as a data attribute data-testid in the rendered code, serving as a hook for automated tests

Slow + discouraged custom theme API See custom theme guide for usage details

Optional text to show when the button is focused or hovered.

Pass type down to the button.

Additional information to be included in the context of analytics events that come from button.

Set the button to autofocus on mount.

Text content to be rendered in the button.

Add a classname to the button.

Allows for overriding the component used to render the button. This is primarily intended for compatibility with custom routing libraries when using the href prop.

For further usage information, refer to the documentation for button.

@example

<Settings
  component={CustomRouterLink}
  href="/path/to/url"
/>

Provides a URL that's used when the button is a link styled as a button.

Places an icon within the button, before the button's text.

An optional name used to identify this component to press listeners. For example, interaction tracing. For more information, see UFO integration into Design System components.

Set if the button is disabled.

Will set the appearance of the button to look highlighted. Will set the appearance of the button to look highlighted.

Change the style to indicate the button is selected.

Handler called on blur.

On click handler. See @atlaskit/analytics-next for analyticsEvent type information

Handler called on focus.

Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref).

@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}

Display a keyboard shortcut in the tooltip.

Keys will be displayed as individual keyboard key segments after the tooltip content.

Note: it will only be used if the tooltip prop is also provided.

Option to fit button width to its parent width.

Set the amount of padding in the button.

Pass target down to the button. If a href is provided, this will be a semantic link styled as a button.

A testId prop is provided for specified elements, which is a unique string that appears as a data attribute data-testid in the rendered code, serving as a hook for automated tests. A testId prop is provided for specified elements, which is a unique string that appears as a data attribute data-testid in the rendered code, serving as a hook for automated tests A testId prop is provided for specified elements, which is a unique string that appears as a data attribute data-testid in the rendered code, serving as a hook for automated tests

Slow + discouraged custom theme API See custom theme guide for usage details

Optional text to show when the button is focused or hovered. Optional text to show when the button is focused or hovered.

Pass type down to the button.

Text for the button tooltip when seen on large viewports.

Causes the Create action to be rendered as a link. This is suitable for when the Create action is handled as a full page rather than in a modal-dialog.

Text for the icon button tooltip when seen on small viewports.

Aria-label attribute for create button

Click handler. See @atlaskit/analytics-next for analyticsEvent type information

A testId prop is provided for specified elements, which is a unique string that appears as a data attribute data-testid in the rendered code, serving as a hook for automated tests.

Will set these elements when defined:

• Create button shown on large screen sizes - {testId}-button
• Create icon button shown on small screen sizes - {testId}-icon-button

Primary text for the call to action.

Allows for overriding the component used to render the button. This is primarily intended for compatibility with custom routing libraries when using the href prop. For further usage information, refer to the documentation for button. @example

<Settings
  component={CustomRouterLink}
  href="/path/to/url"
/>

If wanting to link to another page you can define the href.

Icon for the button.

Unique id for the button.

Causes the button to be disabled.

Makes the element appear selected.

Controls tooltip announcement

Adds a label to the button for users of assistive technologies.

Handler called when the button loses focus.

On click handler. Second argument is the instrumented analytics event. See @atlaskit/analytics-next for analyticsEvent type information

Handler called when the button gains focus.

Called when the mouse is initially clicked on the element.

Called when the mouse enters the element container.

Called when the mouse leaves the element container.

Handler for the mouse up event.

Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref).

@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}

If defining href you may want to define target as well.

A testId prop is provided for specified elements, which is a unique string that appears as a data attribute data-testid in the rendered code, serving as a hook for automated tests

Theme for the icon button.

Text that will be displayed in the tooltip when hovered or focused on the button.

Allows for overriding the component used to render the button. This is primarily intended for compatibility with custom routing libraries when using the href prop. For further usage information, refer to the documentation for button. @example

<Settings
  component={CustomRouterLink}
  href="/path/to/url"
/>

If wanting to link to another page you can define the href.

Unique id for the button.

Causes the button to be disabled.

Makes the element appear selected.

Adds a label to the button for users of assistive technologies. Used to describe the search icon and text field for people viewing the page with a screen reader.

Handler called when the button loses focus.

On click handler. Second argument is the instrumented analytics event. See @atlaskit/analytics-next for analyticsEvent type information

Handler called when the button gains focus.

Called when the mouse is initially clicked on the element.

Called when the mouse enters the element container.

Called when the mouse leaves the element container.

Handler for the mouse up event.

Placeholder text for the search textbox.

If defining href you may want to define target as well.

A testId prop is provided for specified elements, which is a unique string that appears as a data attribute data-testid in the rendered code, serving as a hook for automated tests

Text that will be displayed in the tooltip when hovered or focused on the button.

Value of search field.

Component to be used for the badge. Generally you'll want to use NotificationIndicator from @atlaskit/notification-indicator.

Allows for overriding the component used to render the button. This is primarily intended for compatibility with custom routing libraries when using the href prop. For further usage information, refer to the documentation for button. @example

<Settings
  component={CustomRouterLink}
  href="/path/to/url"
/>

If wanting to link to another page you can define the href.

Unique id for the button.

Causes the button to be disabled.

Makes the element appear selected.

Adds a label to the button for users of assistive technologies.

Handler called when the button loses focus.

On click handler. Second argument is the instrumented analytics event. See @atlaskit/analytics-next for analyticsEvent type information

Handler called when the button gains focus.

Called when the mouse is initially clicked on the element.

Called when the mouse enters the element container.

Called when the mouse leaves the element container.

Handler for the mouse up event.

Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref).

@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}

If defining href you may want to define target as well.

A testId prop is provided for specified elements, which is a unique string that appears as a data attribute data-testid in the rendered code, serving as a hook for automated tests

Text that will be displayed in the tooltip when hovered or focused on the button.

Component to be used for the badge. Generally you'll want to use NotificationIndicator from @atlaskit/notification-indicator.

Allows for overriding the component used to render the button. This is primarily intended for compatibility with custom routing libraries when using the href prop. For further usage information, refer to the documentation for button. @example

<Settings
  component={CustomRouterLink}
  href="/path/to/url"
/>

If wanting to link to another page you can define the href.

Unique id for the button.

Causes the button to be disabled.

Makes the element appear selected.

Adds a label to the button for users of assistive technologies.

Handler called when the button loses focus.

On click handler. Second argument is the instrumented analytics event. See @atlaskit/analytics-next for analyticsEvent type information

Handler called when the button gains focus.

Called when the mouse is initially clicked on the element.

Called when the mouse enters the element container.

Called when the mouse leaves the element container.

Handler for the mouse up event.

Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref).

@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}

If defining href you may want to define target as well.

A testId prop is provided for specified elements, which is a unique string that appears as a data attribute data-testid in the rendered code, serving as a hook for automated tests

Text that will be displayed in the tooltip when hovered or focused on the button.

Allows for overriding the component used to render the button. This is primarily intended for compatibility with custom routing libraries when using the href prop. For further usage information, refer to the documentation for button. @example

<Settings
  component={CustomRouterLink}
  href="/path/to/url"
/>

If wanting to link to another page you can define the href.

Unique id for the button.

Causes the button to be disabled.

Makes the element appear selected.

Adds a label to the button for users of assistive technologies.

Handler called when the button loses focus.

On click handler. Second argument is the instrumented analytics event. See @atlaskit/analytics-next for analyticsEvent type information

Handler called when the button gains focus.

Called when the mouse is initially clicked on the element.

Called when the mouse enters the element container.

Called when the mouse leaves the element container.

Handler for the mouse up event.

Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref).

@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}

If defining href you may want to define target as well.

A testId prop is provided for specified elements, which is a unique string that appears as a data attribute data-testid in the rendered code, serving as a hook for automated tests

Text that will be displayed in the tooltip when hovered or focused on the button.

Allows for overriding the component used to render the button. This is primarily intended for compatibility with custom routing libraries when using the href prop. For further usage information, refer to the documentation for button. @example

<Settings
  component={CustomRouterLink}
  href="/path/to/url"
/>

If wanting to link to another page you can define the href.

Unique id for the button.

Causes the button to be disabled.

Makes the element appear selected.

Adds a label to the button for users of assistive technologies.

Handler called when the button loses focus.

On click handler. Second argument is the instrumented analytics event. See @atlaskit/analytics-next for analyticsEvent type information

Handler called when the button gains focus.

Called when the mouse is initially clicked on the element.

Called when the mouse enters the element container.

Called when the mouse leaves the element container.

Handler for the mouse up event.

If defining href you may want to define target as well.

A testId prop is provided for specified elements, which is a unique string that appears as a data attribute data-testid in the rendered code, serving as a hook for automated tests

Text that will be displayed in the tooltip when hovered or focused on the button.

Allows for overriding the component used to render the button. This is primarily intended for compatibility with custom routing libraries when using the href prop. For further usage information, refer to the documentation for button. @example

<Settings
  component={CustomRouterLink}
  href="/path/to/url"
/>

If wanting to link to another page you can define the href.

Icon for the button.

Unique id for the button.

Causes the button to be disabled.

Makes the element appear selected.

Controls tooltip announcement

Adds a label to the button for users of assistive technologies.

Handler called when the button loses focus.

On click handler. Second argument is the instrumented analytics event. See @atlaskit/analytics-next for analyticsEvent type information

Handler called when the button gains focus.

Called when the mouse is initially clicked on the element.

Called when the mouse enters the element container.

Called when the mouse leaves the element container.

Handler for the mouse up event.

Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref).

@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}

If defining href you may want to define target as well.

A testId prop is provided for specified elements, which is a unique string that appears as a data attribute data-testid in the rendered code, serving as a hook for automated tests

Theme for the icon button.

Text that will be displayed in the tooltip when hovered or focused on the button.

How many skeleton primary items to display.

How many skeleton secondary items to display.

Whether to display a skeleton for the search bar.

Whether to display a skeleton for the site name.

A testId prop is provided for specified elements, which is a unique string that appears as a data attribute data-testid in the rendered code, serving as a hook for automated tests.

Will set these elements when defined:

- Header element - `{testId}-header`
- Primary actions container - `{testId}-primary-actions`
- Secondary actions container - `{testId}-secondary-actions`
- Overflow menu popup - `{testId}-overflow-menu-popup`
- Overflow menu button - `{testId}-overflow-menu-trigger`

Slow and discouraged custom theme API

A testId prop is provided for specified elements, which is a unique string that appears as a data attribute data-testid in the rendered code, serving as a hook for automated tests.

Text to be displayed inside the skeleton create button.

Content to be placed inside the skeleton.

Describes the specific role of this navigation component for users viewing the page with a screen reader. Differentiates from other navigation buttons on a page.

A testId prop is provided for specified elements, which is a unique string that appears as a data attribute data-testid in the rendered code, serving as a hook for automated tests.

Children to be displayed inside the skeleton button. Renders if text prop not set

Sets the appearance of the skeleton button to look like a dropdown button.

Sets the appearance of the skeleton button to look highlighted.

A unique string that appears as a data attribute data-testid in the rendered code, serving as a hook for automated tests.

Text content to be displayed inside the skeleton button.

Describes the specific role of this navigation component for users viewing the page with a screen reader. Use this to differentiate the buttons from other navigation buttons on a page.

A testId prop is provided for specified elements, which is a unique string that appears as a data attribute data-testid in the rendered code, serving as a hook for automated tests.