# Filters

## Available Filters

***Filter Name***

### `appMenu`

***Description***

Allows you to add or modify items in the main app menu (top bar menu)

***Callback Function Parameters***

* macOS Menu Template 
* Current Platform provided by `process.platform`

```javascript
function(menu: MenuTemplate[], platform: string): MenuTemplate[];
```

***\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_***

***Filter Name***

### `siteInfoMoreMenu`

***Description***

Allows you to add menu items to the Site Info More menu inside of a single site view. 

***Callback Function Parameters***

* menuItems 
* [currentSite](/building/hooks/common-parameters.md)

```javascript
function(menuItems: SiteInfoMoreMenuItem[], site: Site): SiteInfoMoreMenuItem[];
```

***Example***

```javascript
hooks.addFilter('siteInfoMoreMenu', function (menu, site) {

	menu.push({
		label: 'Volumes',
		enabled: !this.context.router.isActive(`/site-info/${site.id}/volumes`),
		click: () => {
			context.events.send('goToRoute', `/site-info/${site.id}/volumes`);
		},
	});

	return menu;

});
```

***\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_***

***Filter Name***

### `preferencesMenuItems`

***Description***

Add-ons have the ability to add items to Local's preferences section by using the `preferencesMenuItems` filter hook. This filter will add a new item to the left hand column of all Preferences views and allow add-ons to add their own content section.

![](/files/-MJSUCaro3xxy0U-3A7y)

An [`AddonSettingsItem`](https://github.com/getflywheel/local-addon-api/blob/99b03ca5298699ab79a804b43f4cc22cac5981ce/renderer.d.ts#L54-L65) object is given to Local via the `preferencesMenuItems` hook (see usage examples below). This can then render an array of [`PreferencesSection`](https://github.com/getflywheel/local-addon-api/blob/99b03ca5298699ab79a804b43f4cc22cac5981ce/renderer.d.ts#L43-L48)'s **or** any React component. The latter is provided mainly as an escape hatch in the case that an add-on needs more flexibility. Each `PreferencesSection` then provides an optional header and a single or array of [`MenuContentRowItem`](https://github.com/getflywheel/local-addon-api/blob/99b03ca5298699ab79a804b43f4cc22cac5981ce/renderer.d.ts#L36-L41)(s).

> *Props passed to `<Row />` or `<Override />` components*

```javascript
{
	// React Router props (types are not accurately documented here and developers should reference the React Router documentation for more details)
	history: any;
	location: any;
	match: any;
	params: any;

	// controls whether or not the "apply" button (rendered by Local) is enabled (clickable) or disabled (not clickable)
	setApplyButtonDisabled: (isDisabled: boolean) => void;

	// various other props may be passed via Local but are not an offically supported component of this API as of the time of writing
}
```

***Callback Function Parameters***

* preferencesMenu

```javascript
function(preferencesItem: PreferencesItem[]): PreferencesItem[];
```

***Examples***

"Standard" example passing in sections and sub-headers

```javascript
const preferenceItem: AddonSettingsItem = {
	path: 'image-optimizer',
	displayName: 'Image Optimizer',
	sections: [
		{
			// subHeader is optional and if omitted, no subHeader will be rendered
			subHeader: 'header 1',
			rows: [
				{
					// this defines what string will be rendered in the left hand "column" of a row
					name: 'line 1',
					// this defines what will be rendered in the right hand "column" of a row. It can be any React component.
					component: Preferences,
				},
				// ...add some more rows if you want
			],
		},
		// ...add some more sections if you want
	],
	onApply: () => {
		console.log('changes applied!')
	},
	componentProps: {
		// This optional object can be any arbitrary props to get passed to your row components (or Override component)
	},
};

hooks.addFilter(
	'preferencesMenuItems',
	(menu) => {
		menu.push(preferenceItem);

		// remember to return the menu array here! If you don't Local won't be able to render your Preference item
		return menu;
	}
);
```

Overriding Sections with a single React Component (allows you to render arbitrary things in the "content area")

```javascript
const preferenceItem = {
	path: 'image-optimizer',
	displayName: 'Image Optimizer',
	// this can also just be any old React component. It will be rendered in the Preferences content area
	sections: (props) => <div>{props.title}<div/>,
	onApply: () => {
		console.log('changes applied!')
	},
	componentProps: {
		/* Arbitrary props that will get passed to your row components or section override component. */
		/* here we are passing it "title" which will get passed to the "sections" component */
		title: 'Preferences Title',
	},
}

hooks.addFilter(
	'preferencesMenuItems',
	(menu) => {
		menu.push(preferenceItem);
 
		return menu;
	};
);
```

## Environment Filters

{% hint style="warning" %}
`ENV_ID` and `ENV_VERSION` are for illustrative purposes only and should be replaced with a static value or variable.
{% endhint %}

| Filter Name                                      | Parameters                                        |
| ------------------------------------------------ | ------------------------------------------------- |
| `importBlueprintSiteSettings:ENV_ID:ENV_VERSION` | [site](/building/hooks/common-parameters.md#site) |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://build.localwp.com/building/hooks/filters.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.