Show more

The show more pattern communicates that more of the same items exist and gives a user a way to view them. It manages information density by showing only some items at first and hinting that it can display more.

A show more indicator takes one of two forms:

• +N more: The default format. A text action with a count of additional items followed by "more" (for example, "+5 more" in a label list). Use this when the count is known, as it sets a clearer expectation for the user. The "more" text can be dropped when the context makes it redundant, such as "+3" in an avatar group.
• Show more: A text action without a count. Used when the total number of additional items is unknown, indeterminate, or when the emphasis is on the action rather than the quantity. This is also appropriate when items are loaded dynamically and the total isn't available upfront.

Guidelines

When to use

• Use the show more pattern when a collection of items exceeds the available space or a defined display limit and showing all items at once would create visual clutter or reduce scannability. The additional items should be of equal importance to the visible items because they are not secondary or less relevant.

When not to use

• If a user will likely need all of the items anyway, or if expansion would be frequent, consider revealing all content by default.
• If hiding the items after expanding is necessary, then the expand and collapse behavior of an accordion or collapse component is a better fit.
• If you need to direct a user to a comprehensive view on another location or page, use a link instead.
• For lists of items that can be viewed one page at a time, use pagination instead.
• If items are loaded incrementally as the user scrolls or requests more, use the loading pattern instead.
• If revealing content leads to different types of information rather than more of the same, use progressive disclosure instead.
• If the content overflow is because of text length rather than number of items, use truncation instead.

Appearance

• Present the show more indicator as an unstyled button with minimal padding (gl-p-1) that appears as plain text styled like a tertiary action. Do not use a badge or other container treatment.
• Use neutral action design tokens when the interactivity is secondary to, or detracts from, the content. Use confirm action design tokens on text to emphasize the action.
• Format the count with no space between the "+" and the number: "+5 more" not "+ 5 more."
• Use a non-breaking space ( ) in place of a regular space or wrap the text in a nowrap utility to keep the text on the same line.
• Follow the alignment of the parent context. If items are inline, the indicator is inline. If items are stacked vertically and left-aligned, the indicator is too. For larger regions using the literal "Show more" text, center it horizontally below the visible items.

Behavior

• Showing more is a one-way, one-time action within the current view. After the show more indicator is triggered, all items are shown and there isn't an action to show less aside from a page reload which will reset the view.
• Remove the show more indicator after the user activates it.
• Reveal additional items inline without navigating away from the current view. Revealed items should match the visual presentation of the initially visible items.
• Reveal additional items inline, not in a popover or tooltip.
• A page reload or section refresh resets the view and hides the items.

Considerations

• Use of this pattern is most appropriate when the full content is short enough to display without navigation and the expanded content doesn't negatively impact the layout.
• Make the number of initially visible items intentional and context-dependent. Consider the available space, the visual weight of each item, and what count provides useful information at a glance.
• A scrim or other visual treatment beyond the show more action is not used and could imply scrolling or impact what is currently visible.

Examples

<!-- Inline items with neutral action styling -->
<script>
  export default {
    data() {
      return {
        showAllItems: false,
      };
    },
    methods: {
      showMore() {
        this.showAllItems = true;
      },
    },
  };
</script>

<template>
  <div>
    <div class="gl-display-flex gl-flex-wrap gl-gap-2">
      <gl-badge variant="info">Item 1</gl-badge>
      <gl-badge variant="info">Item 2</gl-badge>
      <gl-badge variant="info">Item 3</gl-badge>
      <gl-badge v-show="showAllItems" variant="info">Item 4</gl-badge>
      <gl-badge v-show="showAllItems" variant="info">Item 5</gl-badge>
      <button v-show="!showAllItems" class="gl-action-neutral-colors gl-rounded-action gl-p-1 gl-text-sm gl-leading-1" @click="showMore">
        +2&nbsp;more
      </button>
    </div>
  </div>
</template>

<!-- Centered "Show more" text for larger regions -->
<script>
  export default {
    data() {
      return {
        showAllItems: false,
      };
    },
    methods: {
      showMore() {
        this.showAllItems = true;
      },
    },
  };
</script>

<template>
  <div>
    <div class="gl-display-flex gl-flex-wrap gl-gap-4">
      <span>Item</span>
      <span>Item</span>
      <span>Item</span>
      <span v-show="showAllItems">Item</span>
      <span v-show="showAllItems">Item</span>
      <button v-show="!showAllItems" class="gl-action-confirm-colors gl-rounded-action gl-p-1 gl-leading-1" @click="showMore">
        Show more
      </button>
    </div>
</div>
</template>

Accessibility

• Use an aria-label or visually hidden text to provide the full action context, such as "3 more assignees" rather than just "+3 more".
• Hide additional items from all users, including assistive technology, until revealed. Do not allow them to be reachable by screen readers or keyboard navigation before activation.
• After activation, move focus to the first newly revealed item. If the item is not natively interactive, use tabindex="-1" to receive programmatic focus without adding it to the tab order.
• Do not use aria-expanded on the show more indicator. Since the indicator is removed after activation rather than toggled, aria-expanded would imply a toggle interaction that does not exist.