49k Log in Get started
Analytics
Embedding
Administration
Other resources

Browser component reference

Reference material for embedding a collection browser:

For how to set all this up, check out Embed a collection browser.

Web component metabase-browser attributes

These attributes apply to the <metabase-browser> web component.

Property Type Description
collection-entity-types string[] An array of entity types to show in the collection browser: collection, dashboard, question, model.
—
Optional
Possible values: "model", "collection", "dashboard", "question"
collection-page-size number How many items to show per page in the collection browser.
—
Optional
collection-visible-columns string[] An array of columns to show in the collection browser: type, name, description, lastEditedBy, lastEditedAt, archive.
—
Optional
Possible values: "type", "name", "description", "lastEditedBy", "lastEditedAt", "archive"
data-picker-entity-types string[] An array of entity types to show in the question’s data picker: model, table.
—
Optional
Possible values: "model", "table"
enable-entity-navigation boolean Whether to enable internal entity navigation (links to dashboards/questions).
—
Optional
Default: false
initial-collection string | number Which collection to start from. Use a collection ID (e.g., 14) to start in a specific collection, or "root" for the top-level “Our Analytics” collection.
read-only boolean Whether the content manager is in read-only mode. When true, people can interact with items (filter, summarize, drill-through) but can’t save. When false, they can create and edit items.
—
Optional
Default: true
with-new-dashboard boolean Whether to show the “New dashboard” button. Only applies when read-only is false.
—
Optional
Default: true
with-new-question boolean Whether to show the “New question” button.
—
Optional
Default: true

Depending on the framework you’re using, you may need to stringify attributes before passing them to the component. And if you surround an attribute’s value with double quotes, use single quotes inside it:

<metabase-browser
  initial-collection="123"
  collection-entity-types="['collection', 'dashboard']"
  data-picker-entity-types="['model']"
></metabase-browser>

These examples use sequential IDs — the number in the item’s URL. On Pro and Enterprise plans, you can use entity IDs instead; they stay the same when you serialize content from one Metabase to another, like from staging to production.

React SDK CollectionBrowser props

Modular embedding SDK is only available on Pro and Enterprise plans (both self-hosted and on Metabase Cloud).

CollectionBrowser lists the items in a collection and reports clicks. Unlike the web component, it doesn’t open items or offer buttons for creating them. See React SDK collection browser.

Property Type Description
className? string A custom class name to be added to the root element.
collectionId? SdkCollectionId The numerical ID of the collection, “personal” for the user’s personal collection, “tenant” for the user’s tenant collection, or “root” for the root collection. You can find this ID in the URL when accessing a collection in your Metabase instance. For example, the collection ID in http://localhost:3000/collection/1-my-collection would be 1. Defaults to “personal”
EmptyContentComponent? | ComponentType | null A component to display when there are no items in the collection.
onClick? (item: MetabaseCollectionItem) => void A function to call when an item is clicked.
pageSize? number The number of items to display per page. The default is 25.
showDashboardQuestions? boolean Whether to show questions that belong to a dashboard alongside collection saved questions. Set to false to hide them and keep the list focused on collection content, matching the core Metabase app. Defaults to true.
style? CSSProperties A custom style object to be added to the root element.
visibleColumns? CollectionBrowserListColumns[] The columns to display in the collection items table. If not provided, all columns will be shown.
visibleEntityTypes? ("collection" | "dashboard" | "question" | "model")[] The types of entities that should be visible. If not provided, all entities will be shown.

Further reading

Read docs for other versions of Metabase.

Was this helpful?

Thanks for your feedback!
Want to improve these docs? Propose a change.