Styling Menus and Popups

Style UI elements that float above the main UI, including menus.

Rounding corners

Drop shadows

Elements that float above the user interface are called cards or popups. Internally there is an implementation
difference between the two, but they are the same from the user’s point of view, so it is appropriate to style them in
the same way. To set a drop shadow on all floating elements, set the --ag-card-shadow and <code>
variables to a CSS box shadow value:

.ag-theme-alpine {
    --ag-card-shadow: 0 3px 4px black;
    --ag-popup-shadow: 0 3px 4px black;

Styling menus

Menus such as the column menu and context menu are cards and so respond to the instructions above for rounded corners
and shadows. Additionally:


This example combines all of the above techniques to style the column menus. Click on the menu icon in a column header
to see a tabbed menu, or right-click on the grid for a non-tabbed menu:

The following example shows the result by using the CSS styles below. Try to open the menu of the columns and to edit a
cell to see how the menu and popups are styled.

.ag-theme-alpine {
    --ag-card-radius: 10px !important;
    --ag-card-shadow: 0 10px 40px rgb(83, 0, 106) !important;
    --ag-popup-shadow: var(--ag-card-shadow) !important;

.ag-theme-alpine .ag-menu {
    background-color: rgb(244, 220, 250) !important;