Menu Component and color modifiers (e.g. is-primary)

[n614cd]

This is about Bulma.

Overview of the problem

This is about the Bulma CSS framework I'm using Bulma version 1.0.0

My browser is:
Edge 123.0.2420.65 Chrome 123.0.6312.86 Firefox 124.0.1

Description

I am trying to utilize the standard color helper classes "is-primary" "is-info" with sections of a vertical menu. The helpers work correctly with the navbar, but not the vertical menu.

Steps to Reproduce

1. Copy menu block from: https://bulma.io/documentation/components/menu/
2. append "is-primary" and other variables to ech menu element. No effect.

Expected behavior

Menu should respect the modifiers, like the navbar has implemented.

Actual behavior

Nothing happened. Checked generated CSS, the modifiers are not present on the menu classes.

[digitigradeit]

menu never supported colors... in the old docs for 0.9.4 that was easily determined by using the legend on the side of the documentation page, but you can easily change this yourself doing one of the following:

Note there's a concept of a selected item vs an active item but here's a couple examples:

1. Customize through SCSS:

@use "node_modules/bulma/sass/components/menu" with (
    $menu-item-selected-background-l: cv.getVar("scheme-l"),
    $menu-item-selected-color-l: cv.getVar("scheme-invert-l"),
);

or

@use "node_modules/bulma/sass/components/menu" with (
    $menu-item-selected-background-l: cv.getVar("primary-l"),
    $menu-item-selected-color-l: cv.getVar("primary-invert-l"),
);

2. or customize with Plain CSS:

.menu-container a.is-selected {
   background-color: hsl(171,100%,41%);
   color: rgb(255,255,255);
}

[n614cd]

@digitigradeit

Ah, did not catch that. I will give it a try. Thanks.

Tim