Content and conversations, all at once using tabs

Tabs are canvases that you can use to share content, hold conversations, and host third-party services, all within a team’s organic workflow. When you build a tab in Microsoft Teams, it puts your web app front and center where it’s easily accessible from key conversations.


Guidelines

A good tab should display the following characteristics:

Focused functionality

Tabs work best when they’re built to address a specific need. Focus on a small set of tasks or a subset of data that’s relevant to the channel the tab is in.

Reduced chrome

Avoid creating multiple panels in a tab, adding layers of navigation, or requiring users to scroll both vertically and horizontally in one tab. In other words, try not to have tabs in your tab.

Tip

Avoid creating multiple panels in a tab, adding layers of navigation, or requiring users to scroll both vertically and horizontally in one tab.

Integration

Find ways to notify users about tab activity by posting cards to a conversation, for example.

Conversational

Find a way to facilitate conversation around a tab. This ensures that conversations center on the content, data, or process at hand.

Streamlined access

Make sure you’re granting access to the right people at the right time. Keeping your sign-in process simple will avoid creating barriers to contribution and collaboration.

Personality

Your tab canvas presents a good opportunity to brand your experience. Incorporate your own logos, colors, and layouts to communicate personality.

Your logo is an important part of your identity and a connection with your users. So be sure to include it.

  • Place your logo in the left or right corner or along the bottom edge
  • Keep your logo small and unobtrusive

Tip

Please work with our visual style so your service feels like a part of Teams.


Tab layouts

  • Single canvas

    This is one large area where work gets done. OneNote and Wiki follow this pattern. If you have an app that doesn’t separate content into smaller components this would be a good fit.

  • List

    Lists are great for sorting and filtering large quantities of data and are great at keeping the most important things at the top. It is helpful to use sortable columns. Actions can be added to each list item under the ellipsis menu.

  • Column

    Columns are great for workflows that move an item from one column to another to indicate a new status. Consider supporting drag and drop for those scenarios. We recommend using dialogs or inline expansion for detail views.

  • Grid

    Grids are useful for showing elements which are highly visual. It helps to include a filter or search control at the top.


Types of tabs

  • Wiki

  • Planner


Best practices

Always include a default state

Include a default state to make tabs easy to set up even if your tab is configurable.

Deep linking

Whenever possible, cards and bots should deep link to richer data in a hosted tab. For example, a card may show a summary of bug data, but clicking it can shows the entire bug in a tab.

Naming

In many cases, the name of your app may make a great tab name. But consider naming your tabs according to the functionality they provide.

Configuration page height

In September 2018, the height of the content area for the tab Configuration page was increased significantly; the width remained unchanged. If you have a tab configuration page designed for the older, smaller size, your tab configuration page will have a great deal of vertical whitespace. Here are the new dimensions:

Follow these guidelines to correctly format content in your tab configuration pages:

  • Base the minimum height of your content area of your tab configuration page on fixed-height graphic elements.
  • Calculate available vertical space (the height of the content area in the configuration page) using window.innerHeight. This returns the size of the <iframe> in which your configuration page resides, which may change in future releases. By using this value, your content will adjust automatically to future changes.
  • Allocate vertical space to the variable-height elements minus what's needed for the fixed-height elements.
  • For the login state, vertically and horizontally center the content.
  • If you want a background image, you need either a new image, sized to fit the new area (preferred), or you can keep the same image and choose between:
    • aligning to the upper left hand corner.
    • scaling the image to fit.

When properly sized, your tab configuration page should look similar to this: