> For clean Markdown content of this page, append .md to this URL. For the complete documentation index, see https://buildwithfern.com/learn/llms.txt.

## Products and versions props for If component

components, navigation

The `<If>` component now supports `products` and `versions` props, allowing you to conditionally show content based on where a page is located within the navigation structure.

**`Markdown`**

```jsx Markdown
<If products={["api-reference"]}>
  This content only shows in the api-reference product
</If>

<If versions={["v2", "v3"]}>
  This content only shows in v2 or v3
</If>

<If products={["docs"]} versions={["v2"]}>
  All conditions must match (AND logic)
</If>
```

You can also use the `not` prop to invert the condition, showing content when the current product or version does not match.

Read the docs