diff --git a/packages/core/src/components/menu/menuItem.tsx b/packages/core/src/components/menu/menuItem.tsx
index 1471f5a1f3..3599c99a9c 100644
--- a/packages/core/src/components/menu/menuItem.tsx
+++ b/packages/core/src/components/menu/menuItem.tsx
@@ -35,15 +35,7 @@ export interface IMenuItemProps extends ActionProps, LinkProps {
     text: React.ReactNode;
 
     /**
-     * Whether this item should render with an active appearance.
-     * This is the same styling as the `:active` CSS element state.
-     *
-     * Note: in Blueprint 3.x, this prop was conflated with a "selected" appearance
-     * when `intent` was undefined. For legacy purposes, we emulate this behavior in
-     * Blueprint 4.x, so setting `active={true} intent={undefined}` is the same as
-     * `selected={true}`. This prop will be removed in a future major version.
-     *
-     * @deprecated use `selected` prop
+     * Whether this item should render with an active appearance. Used to indicate keyboard focus.
      */
     active?: boolean;
 
@@ -117,7 +109,7 @@ export interface IMenuItemProps extends ActionProps, LinkProps {
     popoverProps?: Partial<IPopoverProps>;
 
     /**
-     * Whether this item should appear selected.
+     * Whether this item is selected. This will set the `aria-selected` attribute.
      */
     selected?: boolean;
 
diff --git a/packages/core/test/menu/menuItemTests.tsx b/packages/core/test/menu/menuItemTests.tsx
index 9a0f8423d2..fbd077f756 100644
--- a/packages/core/test/menu/menuItemTests.tsx
+++ b/packages/core/test/menu/menuItemTests.tsx
@@ -72,8 +72,9 @@ describe("MenuItem", () => {
     });
 
     it("can set roleStructure to change role prop structure to that of a listbox or select item", () => {
-        const wrapper = mount(<MenuItem text="Roles" roleStructure="listoption" />);
+        const wrapper = mount(<MenuItem text="Roles" roleStructure="listoption" selected={true} />);
         assert.equal(wrapper.find("li").prop("role"), "option");
+        assert.equal(wrapper.find("li").prop("aria-selected"), true);
         assert.equal(wrapper.find("a").prop("role"), undefined);
     });
 
diff --git a/packages/docs-app/src/common/filmSelect.tsx b/packages/docs-app/src/common/filmSelect.tsx
index 7f06ed4357..d30c8b3040 100644
--- a/packages/docs-app/src/common/filmSelect.tsx
+++ b/packages/docs-app/src/common/filmSelect.tsx
@@ -18,12 +18,13 @@ import * as React from "react";
 
 import { Button } from "@blueprintjs/core";
 import { MenuItem2 } from "@blueprintjs/popover2";
-import { Select2, Select2Props } from "@blueprintjs/select";
+import { ItemRenderer, Select2, Select2Props } from "@blueprintjs/select";
 
 import {
     areFilmsEqual,
     createFilm,
-    filmSelectProps,
+    filterFilm,
+    getFilmItemProps,
     IFilm,
     maybeAddCreatedFilmToArrays,
     maybeDeleteCreatedFilmFromArrays,
@@ -37,11 +38,12 @@ type Props = Omit<
     Select2Props<IFilm>,
     | "createNewItemFromQuery"
     | "createNewItemRenderer"
+    | "itemPredicate"
+    | "itemRenderer"
     | "items"
     | "itemsEqual"
     | "noResults"
     | "onItemSelect"
-    | keyof typeof filmSelectProps
 > & {
     allowCreate?: boolean;
 };
@@ -51,38 +53,49 @@ export default function ({ allowCreate = false, fill, ...restProps }: Props) {
     const maybeCreateNewItemFromQuery = allowCreate ? createFilm : undefined;
     const maybeCreateNewItemRenderer = allowCreate ? renderCreateFilmOption : null;
 
-    const [items, setItems] = React.useState(filmSelectProps.items);
+    const [items, setItems] = React.useState([...TOP_100_FILMS]);
     const [createdItems, setCreatedItems] = React.useState<IFilm[]>([]);
-    const [film, setFilm] = React.useState(TOP_100_FILMS[0]);
+    const [selectedFilm, setSelectedFilm] = React.useState(TOP_100_FILMS[0]);
     const handleItemSelect = React.useCallback((newFilm: IFilm) => {
         // Delete the old film from the list if it was newly created.
-        const step1Result = maybeDeleteCreatedFilmFromArrays(items, createdItems, film);
+        const step1Result = maybeDeleteCreatedFilmFromArrays(items, createdItems, selectedFilm);
         // Add the new film to the list if it is newly created.
         const step2Result = maybeAddCreatedFilmToArrays(step1Result.items, step1Result.createdItems, newFilm);
         setCreatedItems(step2Result.createdItems);
-        setFilm(newFilm);
+        setSelectedFilm(newFilm);
         setItems(step2Result.items);
     }, []);
 
+    const itemRenderer = React.useCallback<ItemRenderer<IFilm>>(
+        (film, props) => {
+            if (!props.modifiers.matchesPredicate) {
+                return null;
+            }
+            return <MenuItem2 {...getFilmItemProps(film, props)} selected={film === selectedFilm} />;
+        },
+        [selectedFilm],
+    );
+
     return (
         <FilmSelect
-            {...filmSelectProps}
             createNewItemFromQuery={maybeCreateNewItemFromQuery}
             createNewItemRenderer={maybeCreateNewItemRenderer}
+            fill={fill}
+            itemPredicate={filterFilm}
+            itemRenderer={itemRenderer}
+            items={items}
             itemsEqual={areFilmsEqual}
             menuProps={{ "aria-label": "films" }}
             noResults={<MenuItem2 disabled={true} text="No results." roleStructure="listoption" />}
             onItemSelect={handleItemSelect}
-            items={items}
-            fill={fill}
             {...restProps}
         >
             <Button
-                icon="film"
-                rightIcon="caret-down"
-                text={film ? `${film.title} (${film.year})` : "(No selection)"}
                 disabled={restProps.disabled}
                 fill={fill}
+                icon="film"
+                rightIcon="caret-down"
+                text={selectedFilm ? `${selectedFilm.title} (${selectedFilm.year})` : "(No selection)"}
             />
         </FilmSelect>
     );
diff --git a/packages/docs-app/src/common/films.tsx b/packages/docs-app/src/common/films.tsx
index f1bbac06d0..b696dc7164 100644
--- a/packages/docs-app/src/common/films.tsx
+++ b/packages/docs-app/src/common/films.tsx
@@ -16,8 +16,8 @@
 
 import * as React from "react";
 
-import { MenuItem2 } from "@blueprintjs/popover2";
-import { ItemPredicate, ItemRenderer } from "@blueprintjs/select";
+import { MenuItem2, MenuItem2Props } from "@blueprintjs/popover2";
+import { IItemRendererProps, ItemPredicate, ItemRenderer } from "@blueprintjs/select";
 
 export interface IFilm {
     /** Title of film. */
@@ -132,23 +132,35 @@ export const TOP_100_FILMS: IFilm[] = [
     { title: "Monty Python and the Holy Grail", year: 1975 },
 ].map((m, index) => ({ ...m, rank: index + 1 }));
 
-export const renderFilm: ItemRenderer<IFilm> = (film, { handleClick, handleFocus, modifiers, query }) => {
-    if (!modifiers.matchesPredicate) {
+/**
+ * Takes the same arguments as `ItemRenderer<IFilm>`, but returns the common menu item
+ * props for that item instead of the rendered element itself. This is useful for implementing
+ * custom item renderers.
+ */
+export function getFilmItemProps(
+    film: IFilm,
+    { handleClick, handleFocus, modifiers, query }: IItemRendererProps,
+): MenuItem2Props & React.Attributes & React.HTMLAttributes<HTMLAnchorElement> {
+    return {
+        active: modifiers.active,
+        disabled: modifiers.disabled,
+        key: film.rank,
+        label: film.year.toString(),
+        onClick: handleClick,
+        onFocus: handleFocus,
+        roleStructure: "listoption",
+        text: highlightText(`${film.rank}. ${film.title}`, query),
+    };
+}
+
+/**
+ * Simple film item renderer _without_ support for "selected" appearance.
+ */
+export const renderFilm: ItemRenderer<IFilm> = (film, props) => {
+    if (!props.modifiers.matchesPredicate) {
         return null;
     }
-    const text = `${film.rank}. ${film.title}`;
-    return (
-        <MenuItem2
-            active={modifiers.active}
-            disabled={modifiers.disabled}
-            label={film.year.toString()}
-            roleStructure="listoption"
-            key={film.rank}
-            onClick={handleClick}
-            onFocus={handleFocus}
-            text={highlightText(text, query)}
-        />
-    );
+    return <MenuItem2 {...getFilmItemProps(film, props)} />;
 };
 
 export const renderCreateFilmOption = (
@@ -212,12 +224,6 @@ function escapeRegExpChars(text: string) {
     return text.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$1");
 }
 
-export const filmSelectProps = {
-    itemPredicate: filterFilm,
-    itemRenderer: renderFilm,
-    items: TOP_100_FILMS,
-};
-
 export function createFilm(title: string): IFilm {
     return {
         rank: 100 + Math.floor(Math.random() * 100 + 1),
diff --git a/packages/docs-app/src/examples/popover2-examples/booleanOrUndefinedSelect.tsx b/packages/docs-app/src/examples/popover2-examples/booleanOrUndefinedSelect.tsx
new file mode 100644
index 0000000000..f071fe8569
--- /dev/null
+++ b/packages/docs-app/src/examples/popover2-examples/booleanOrUndefinedSelect.tsx
@@ -0,0 +1,55 @@
+/*
+ * Copyright 2022 Palantir Technologies, Inc. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as React from "react";
+
+import { Button, ButtonGroup, Code, Label } from "@blueprintjs/core";
+
+export type BooleanOrUndefined = undefined | false | true;
+
+export interface BooleanOrUndefinedSelectProps {
+    disabled?: boolean;
+    label: string;
+    value: BooleanOrUndefined;
+    onChange: (size: BooleanOrUndefined) => void;
+}
+
+export const BooleanOrUndefinedSelect: React.FC<BooleanOrUndefinedSelectProps> = ({
+    disabled,
+    label,
+    value,
+    onChange,
+}) => {
+    const handleUndefined = React.useCallback(() => onChange(undefined), []);
+    const handleTrue = React.useCallback(() => onChange(true), []);
+    const handleFalse = React.useCallback(() => onChange(false), []);
+
+    return (
+        <Label>
+            {label}
+            <ButtonGroup fill={true} style={{ marginTop: 5 }}>
+                <Button
+                    disabled={disabled}
+                    active={value === undefined}
+                    text={<Code>undefined</Code>}
+                    onClick={handleUndefined}
+                />
+                <Button disabled={disabled} active={value === true} text={<Code>true</Code>} onClick={handleTrue} />
+                <Button disabled={disabled} active={value === false} text={<Code>false</Code>} onClick={handleFalse} />
+            </ButtonGroup>
+        </Label>
+    );
+};
diff --git a/packages/docs-app/src/examples/popover2-examples/menuItem2Example.tsx b/packages/docs-app/src/examples/popover2-examples/menuItem2Example.tsx
index 80e8e95c09..92fb272bfe 100644
--- a/packages/docs-app/src/examples/popover2-examples/menuItem2Example.tsx
+++ b/packages/docs-app/src/examples/popover2-examples/menuItem2Example.tsx
@@ -16,29 +16,58 @@
 
 import * as React from "react";
 
-import { Classes, H5, Intent, Menu, Switch } from "@blueprintjs/core";
+import { Classes, Code, H5, HTMLSelect, Intent, Label, Menu, Switch } from "@blueprintjs/core";
 import { Example, handleBooleanChange, handleValueChange, IExampleProps } from "@blueprintjs/docs-theme";
-import { MenuItem2 } from "@blueprintjs/popover2";
+import { MenuItem2, MenuItem2Props } from "@blueprintjs/popover2";
 
+import { PropCodeTooltip } from "../../common/propCodeTooltip";
 import { IntentSelect } from "../core-examples/common/intentSelect";
+import { BooleanOrUndefinedSelect } from "./booleanOrUndefinedSelect";
 
 export function MenuItem2Example(props: IExampleProps) {
     const [large, setLarge] = React.useState(false);
     const [disabled, setDisabled] = React.useState(false);
-    const [selected, setSelected] = React.useState(false);
+    const [selected, setSelected] = React.useState<boolean | undefined>(undefined);
     const [intent, setIntent] = React.useState<Intent>("none");
     const [iconEnabled, setIconEnabled] = React.useState(true);
     const [submenuEnabled, setSubmenuEnabled] = React.useState(true);
+    const [roleStructure, setRoleStructure] = React.useState<MenuItem2Props["roleStructure"]>("menuitem");
+
+    const isSelectedOptionAvailable = roleStructure === "listoption" && !iconEnabled;
 
     const options = (
         <>
             <H5>Props</H5>
             <Switch label="Large" checked={large} onChange={handleBooleanChange(setLarge)} />
             <Switch label="Disabled" checked={disabled} onChange={handleBooleanChange(setDisabled)} />
-            <Switch label="Selected" checked={selected} onChange={handleBooleanChange(setSelected)} />
+            <PropCodeTooltip
+                content={
+                    isSelectedOptionAvailable ? undefined : (
+                        <>
+                            <Code>selected</Code> prop has no effect when <br />
+                            <Code>roleStructure="menuitem"</Code> or when an icon is set
+                        </>
+                    )
+                }
+            >
+                <BooleanOrUndefinedSelect
+                    disabled={!isSelectedOptionAvailable}
+                    label="Selected"
+                    value={selected}
+                    onChange={setSelected}
+                />
+            </PropCodeTooltip>
             <Switch label="Enable icon" checked={iconEnabled} onChange={handleBooleanChange(setIconEnabled)} />
             <Switch label="Enable submenu" checked={submenuEnabled} onChange={handleBooleanChange(setSubmenuEnabled)} />
             <IntentSelect intent={intent} onChange={handleValueChange(setIntent)} />
+            <Label>
+                Role structure
+                <HTMLSelect
+                    options={["menuitem", "listoption"]}
+                    value={roleStructure}
+                    onChange={handleValueChange(setRoleStructure)}
+                />
+            </Label>
         </>
     );
 
@@ -47,11 +76,12 @@ export function MenuItem2Example(props: IExampleProps) {
             <Menu className={Classes.ELEVATION_1} large={large}>
                 <MenuItem2
                     disabled={disabled}
-                    selected={selected}
-                    text="Settings"
                     icon={iconEnabled ? "cog" : undefined}
                     intent={intent}
                     labelElement={submenuEnabled ? undefined : "⌘,"}
+                    roleStructure={roleStructure}
+                    selected={selected}
+                    text="Settings"
                     children={
                         submenuEnabled ? (
                             <>
diff --git a/packages/docs-app/src/examples/select-examples/multiSelectExample.tsx b/packages/docs-app/src/examples/select-examples/multiSelectExample.tsx
index a26789484f..8b61c79618 100644
--- a/packages/docs-app/src/examples/select-examples/multiSelectExample.tsx
+++ b/packages/docs-app/src/examples/select-examples/multiSelectExample.tsx
@@ -25,7 +25,8 @@ import {
     areFilmsEqual,
     arrayContainsFilm,
     createFilm,
-    filmSelectProps,
+    filterFilm,
+    getFilmItemProps,
     IFilm,
     maybeAddCreatedFilmToArrays,
     maybeDeleteCreatedFilmFromArrays,
@@ -64,7 +65,7 @@ export class MultiSelectExample extends React.PureComponent<IExampleProps, IMult
         films: [],
         hasInitialContent: false,
         intent: false,
-        items: filmSelectProps.items,
+        items: TOP_100_FILMS,
         matchTargetWidth: false,
         openOnKeyDown: false,
         popoverMinimal: true,
@@ -115,16 +116,14 @@ export class MultiSelectExample extends React.PureComponent<IExampleProps, IMult
         return (
             <Example options={this.renderOptions()} {...this.props}>
                 <FilmMultiSelect
-                    {...filmSelectProps}
                     {...flags}
                     createNewItemFromQuery={maybeCreateNewItemFromQuery}
                     createNewItemRenderer={maybeCreateNewItemRenderer}
                     initialContent={initialContent}
+                    itemPredicate={filterFilm}
                     itemRenderer={this.renderFilm}
-                    itemsEqual={areFilmsEqual}
-                    // we may customize the default filmSelectProps.items by
-                    // adding newly created items to the list, so pass our own
                     items={this.state.items}
+                    itemsEqual={areFilmsEqual}
                     menuProps={{ "aria-label": "films" }}
                     noResults={<MenuItem2 disabled={true} text="No results." roleStructure="listoption" />}
                     onClear={this.state.showClearButton ? this.handleClear : undefined}
@@ -230,21 +229,17 @@ export class MultiSelectExample extends React.PureComponent<IExampleProps, IMult
 
     private renderTag = (film: IFilm) => film.title;
 
-    // NOTE: not using Films.itemRenderer here so we can set icons.
-    private renderFilm: ItemRenderer<IFilm> = (film, { modifiers, handleClick }) => {
-        if (!modifiers.matchesPredicate) {
+    private renderFilm: ItemRenderer<IFilm> = (film, props) => {
+        if (!props.modifiers.matchesPredicate) {
             return null;
         }
+
         return (
             <MenuItem2
-                selected={modifiers.active}
-                icon={this.isFilmSelected(film) ? "tick" : "blank"}
-                roleStructure="listoption"
-                key={film.rank}
-                label={film.year.toString()}
-                onClick={handleClick}
-                text={`${film.rank}. ${film.title}`}
+                {...getFilmItemProps(film, props)}
+                selected={this.isFilmSelected(film)}
                 shouldDismissPopover={false}
+                text={`${film.rank}. ${film.title}`}
             />
         );
     };
diff --git a/packages/docs-app/src/examples/select-examples/omnibarExample.tsx b/packages/docs-app/src/examples/select-examples/omnibarExample.tsx
index 106e60729a..682e7f7601 100644
--- a/packages/docs-app/src/examples/select-examples/omnibarExample.tsx
+++ b/packages/docs-app/src/examples/select-examples/omnibarExample.tsx
@@ -21,7 +21,15 @@ import { Example, handleBooleanChange, IExampleProps } from "@blueprintjs/docs-t
 import { MenuItem2 } from "@blueprintjs/popover2";
 import { Omnibar } from "@blueprintjs/select";
 
-import { areFilmsEqual, createFilm, filmSelectProps, IFilm, renderCreateFilmOption } from "./../../common/films";
+import {
+    areFilmsEqual,
+    createFilm,
+    filterFilm,
+    IFilm,
+    renderCreateFilmOption,
+    renderFilm,
+    TOP_100_FILMS,
+} from "./../../common/films";
 
 const FilmOmnibar = Omnibar.ofType<IFilm>();
 
@@ -75,14 +83,16 @@ export class OmnibarExample extends React.PureComponent<IExampleProps, IOmnibarE
                     </span>
 
                     <FilmOmnibar
-                        {...filmSelectProps}
                         {...this.state}
                         createNewItemFromQuery={maybeCreateNewItemFromQuery}
                         createNewItemRenderer={maybeCreateNewItemRenderer}
+                        itemPredicate={filterFilm}
+                        itemRenderer={renderFilm}
+                        items={TOP_100_FILMS}
                         itemsEqual={areFilmsEqual}
                         noResults={<MenuItem2 disabled={true} text="No results." />}
-                        onItemSelect={this.handleItemSelect}
                         onClose={this.handleClose}
+                        onItemSelect={this.handleItemSelect}
                     />
                     <Toaster position={Position.TOP} ref={this.refHandlers.toaster} />
                 </Example>
diff --git a/packages/docs-app/src/examples/select-examples/selectExample.tsx b/packages/docs-app/src/examples/select-examples/selectExample.tsx
index 9361070798..0bc52ae4eb 100644
--- a/packages/docs-app/src/examples/select-examples/selectExample.tsx
+++ b/packages/docs-app/src/examples/select-examples/selectExample.tsx
@@ -14,12 +14,11 @@
  * limitations under the License.
  */
 
-/* eslint-disable deprecation/deprecation */
-
 import * as React from "react";
 
-import { H5, MenuItem, Switch } from "@blueprintjs/core";
+import { H5, Switch } from "@blueprintjs/core";
 import { Example, IExampleProps } from "@blueprintjs/docs-theme";
+import { MenuItem2 } from "@blueprintjs/popover2";
 
 import { IFilm, TOP_100_FILMS } from "../../common/films";
 import FilmSelect from "../../common/filmSelect";
@@ -86,7 +85,7 @@ export class SelectExample extends React.PureComponent<IExampleProps, ISelectExa
         const { allowCreate, disabled, disableItems, matchTargetWidth, minimal, ...flags } = this.state;
 
         const initialContent = this.state.hasInitialContent ? (
-            <MenuItem disabled={true} text={`${TOP_100_FILMS.length} items loaded.`} roleStructure="listoption" />
+            <MenuItem2 disabled={true} text={`${TOP_100_FILMS.length} items loaded.`} roleStructure="listoption" />
         ) : undefined;
 
         return (
diff --git a/packages/docs-app/src/examples/select-examples/suggestExample.tsx b/packages/docs-app/src/examples/select-examples/suggestExample.tsx
index ef5ba703d8..0d8d3e5c65 100644
--- a/packages/docs-app/src/examples/select-examples/suggestExample.tsx
+++ b/packages/docs-app/src/examples/select-examples/suggestExample.tsx
@@ -24,11 +24,12 @@ import { Suggest2 } from "@blueprintjs/select";
 import {
     areFilmsEqual,
     createFilm,
-    filmSelectProps,
+    filterFilm,
     IFilm,
     maybeAddCreatedFilmToArrays,
     maybeDeleteCreatedFilmFromArrays,
     renderCreateFilmOption,
+    renderFilm,
     TOP_100_FILMS,
 } from "./../../common/films";
 
@@ -58,7 +59,7 @@ export class SuggestExample extends React.PureComponent<IExampleProps, ISuggestE
         disabled: false,
         fill: false,
         film: TOP_100_FILMS[0],
-        items: filmSelectProps.items,
+        items: [...TOP_100_FILMS],
         matchTargetWidth: false,
         minimal: true,
         openOnKeyDown: false,
@@ -96,15 +97,14 @@ export class SuggestExample extends React.PureComponent<IExampleProps, ISuggestE
         return (
             <Example options={this.renderOptions()} {...this.props}>
                 <FilmSuggest
-                    {...filmSelectProps}
                     {...flags}
                     createNewItemFromQuery={maybeCreateNewItemFromQuery}
                     createNewItemRenderer={maybeCreateNewItemRenderer}
                     inputValueRenderer={this.renderInputValue}
-                    itemsEqual={areFilmsEqual}
-                    // we may customize the default filmSelectProps.items by
-                    // adding newly created items to the list, so pass our own.
                     items={this.state.items}
+                    itemsEqual={areFilmsEqual}
+                    itemPredicate={filterFilm}
+                    itemRenderer={renderFilm}
                     noResults={<MenuItem2 disabled={true} text="No results." roleStructure="listoption" />}
                     onItemSelect={this.handleValueChange}
                     popoverProps={{ matchTargetWidth, minimal }}
diff --git a/packages/docs-theme/src/components/navigator.tsx b/packages/docs-theme/src/components/navigator.tsx
index 8e5e6e57ae..546e77f4c9 100644
--- a/packages/docs-theme/src/components/navigator.tsx
+++ b/packages/docs-theme/src/components/navigator.tsx
@@ -114,12 +114,13 @@ export class Navigator extends React.PureComponent<INavigatorProps> {
         );
         return (
             <MenuItem2
-                selected={props.modifiers.active}
-                href={"#" + section.route}
+                active={props.modifiers.active}
+                href={`#${section.route}`}
                 key={section.route}
                 multiline={true}
                 onClick={props.handleClick}
                 onFocus={props.handleFocus}
+                roleStructure="listoption"
                 text={text}
             />
         );
diff --git a/packages/docs-theme/src/styles/_navigator.scss b/packages/docs-theme/src/styles/_navigator.scss
index 1425c3790f..4277929f96 100644
--- a/packages/docs-theme/src/styles/_navigator.scss
+++ b/packages/docs-theme/src/styles/_navigator.scss
@@ -12,8 +12,4 @@ $navigator-width: $pt-grid-size * 40;
     // center-align text and SVG icons
     display: flex;
   }
-
-  .#{$ns}-menu-item.#{$ns}-active small {
-    color: rgba($white, 0.7);
-  }
 }
diff --git a/packages/popover2/src/menu-item2.md b/packages/popover2/src/menu-item2.md
index 6b2b4e2f5b..112ce4b0a2 100644
--- a/packages/popover2/src/menu-item2.md
+++ b/packages/popover2/src/menu-item2.md
@@ -20,10 +20,25 @@ on the wiki (the changes are minimal, it should be an easy drop-in replacement).
 
 A MenuItem2 is a single interactive item in a [Menu](#core/components/menu).
 
+@reactExample MenuItem2Example
+
+@## Markup
+
 This component renders an `<li>` element containing an `<a>` anchor element.
 Use the required `text` prop for text label content.
 To make the menu item interactive, provide the `href`, `target`, and `onClick` props as necessary.
 
+MenuItem2 supports multiple "role structures" which allow it to be used in different contexts
+depending on the `role` attribute of its parent `<ul>` list:
+
+- `roleStructure="menuitem"` is the default. This is appropriate for a `<ul role="menu">` parent.
+    The item will render with `<li role="none">` and `<a role="menuitem">`.
+- `roleStructure="listoption"` is appropriate for a `<ul role="listbox">` parent, such as
+    those found in Select2, Suggest2, and MultiSelect2 components. The item will render with
+    `<li role="option">` and `<a>` (anchor role undefined).
+
+@## Submenus
+
 Menu items may have submenus when nested MenuItem2 `children` are defined. These nested items will
 be displayed inside a popover next to the active menu item on hover. Here's a code example:
 
@@ -43,4 +58,6 @@ function Example() {
 }
 ```
 
-@reactExample MenuItem2Example
+@## Props
+
+@interface MenuItem2Props
diff --git a/packages/popover2/src/menuItem2.tsx b/packages/popover2/src/menuItem2.tsx
index 0ec8f0f243..9f6f869dad 100644
--- a/packages/popover2/src/menuItem2.tsx
+++ b/packages/popover2/src/menuItem2.tsx
@@ -37,21 +37,15 @@ export interface MenuItem2Props extends ActionProps, LinkProps {
     text: React.ReactNode;
 
     /**
-     * Whether this item should render with an active appearance.
-     * This is the same styling as the `:active` CSS element state.
-     *
-     * Note: in Blueprint 3.x, this prop was conflated with a "selected" appearance
-     * when `intent` was undefined. For legacy purposes, we emulate this behavior in
-     * Blueprint 4.x, so setting `active={true} intent={undefined}` is the same as
-     * `selected={true}`. This prop will be removed in a future major version.
-     *
-     * @deprecated use `selected` prop
+     * Whether this item should appear _active_, often useful to
+     * indicate keyboard focus. Note that this is distinct from _selected_
+     * appearance, which has its own prop.
      */
     active?: boolean;
 
     /**
-     * Children of this component will be rendered in a __submenu__ that appears when hovering or
-     * clicking on this menu item.
+     * Children of this component will be rendered in a _submenu_
+     * that appears in a popover when hovering or clicking on this item.
      *
      * Use `text` prop for the content of the menu item itself.
      */
@@ -120,6 +114,11 @@ export interface MenuItem2Props extends ActionProps, LinkProps {
 
     /**
      * Whether this item should appear selected.
+     * Defining this  will set the `aria-selected` attribute and apply a
+     * "check" or "blank" icon on the item (unless the `icon` prop is set,
+     * which always takes precedence).
+     *
+     * @default undefined
      */
     selected?: boolean;
 
@@ -159,7 +158,7 @@ export class MenuItem2 extends AbstractPureComponent2<MenuItem2Props & React.Anc
         disabled: false,
         multiline: false,
         popoverProps: {},
-        selected: false,
+        selected: undefined,
         shouldDismissPopover: true,
         text: "",
     };
@@ -168,12 +167,10 @@ export class MenuItem2 extends AbstractPureComponent2<MenuItem2Props & React.Anc
 
     public render() {
         const {
-            // eslint-disable-next-line deprecation/deprecation
             active,
             className,
             children,
             disabled,
-            icon,
             intent,
             labelClassName,
             labelElement,
@@ -190,6 +187,23 @@ export class MenuItem2 extends AbstractPureComponent2<MenuItem2Props & React.Anc
             ...htmlProps
         } = this.props;
 
+        const [liRole, targetRole, icon, ariaSelected] =
+            roleStructure === "listoption"
+                ? // "listoption": parent has listbox role, or is a <select>
+                  [
+                      "option",
+                      undefined, // target should have no role
+                      this.props.icon ?? (selected === undefined ? undefined : selected ? "small-tick" : "blank"),
+                      Boolean(selected), // aria-selected prop
+                  ]
+                : // "menuitem": parent has menu role
+                  [
+                      "none",
+                      "menuitem",
+                      this.props.icon,
+                      undefined, // don't set aria-selected prop
+                  ];
+
         const hasIcon = icon != null;
         const hasSubmenu = children != null;
 
@@ -200,18 +214,13 @@ export class MenuItem2 extends AbstractPureComponent2<MenuItem2Props & React.Anc
             {
                 [CoreClasses.ACTIVE]: active,
                 [CoreClasses.DISABLED]: disabled,
-                [CoreClasses.SELECTED]: selected || (active && intentClass === undefined),
                 // prevent popover from closing when clicking on submenu trigger or disabled item
                 [Classes.POPOVER2_DISMISS]: shouldDismissPopover && !disabled && !hasSubmenu,
+                [CoreClasses.SELECTED]: active && intentClass === undefined,
             },
             className,
         );
 
-        const [liRole, targetRole, ariaSelected] =
-            roleStructure === "listoption"
-                ? ["option", undefined, active || selected] // parent has listbox role, or is a <select>
-                : ["none", "menuitem", undefined]; // parent has menu role
-
         const target = React.createElement(
             tagName,
             {
diff --git a/packages/select/src/components/query-list/queryList.tsx b/packages/select/src/components/query-list/queryList.tsx
index d35de888f9..108ec9e405 100644
--- a/packages/select/src/components/query-list/queryList.tsx
+++ b/packages/select/src/components/query-list/queryList.tsx
@@ -371,12 +371,12 @@ export class QueryList<T> extends AbstractComponent2<QueryListProps<T>, IQueryLi
     /** wrapper around `itemRenderer` to inject props */
     private renderItem = (item: T, index: number) => {
         if (this.props.disabled !== true) {
-            const { activeItem, query } = this.state;
-            const matchesPredicate = this.state.filteredItems.indexOf(item) >= 0;
+            const { activeItem, query, filteredItems } = this.state;
+
             const modifiers: IItemModifiers = {
                 active: executeItemsEqual(this.props.itemsEqual, getActiveItem(activeItem), item),
                 disabled: isItemDisabled(item, index, this.props.itemDisabled),
-                matchesPredicate,
+                matchesPredicate: filteredItems.indexOf(item) >= 0,
             };
             return this.props.itemRenderer(item, {
                 handleClick: e => this.handleItemSelect(item, e),
diff --git a/packages/select/src/components/select/select2.md b/packages/select/src/components/select/select2.md
index 6d960e10ed..2feaea9609 100644
--- a/packages/select/src/components/select/select2.md
+++ b/packages/select/src/components/select/select2.md
@@ -160,7 +160,7 @@ function renderCreateFilmOption(
             icon="add"
             text={`Create "${query}"`}
             roleStructure="listoption"
-            selected={active}
+            active={active}
             onClick={handleClick}
             shouldDismissPopover={false}
         />
@@ -263,7 +263,7 @@ const renderFilm: ItemRenderer<Film> = (film, { handleClick, handleFocus, modifi
             text={film.title}
             label={film.year}
             roleStructure="listoption"
-            selected={modifiers.active}
+            active={modifiers.active}
             key={film.title}
             onClick={handleClick}
             onFocus={handleFocus}