[MenuItem] Links within Menu items

[0x0ece]

Hi, I was looking at the current implementation of menu items and noticed that there is no actual link (meaning, html <a> tag). As a result, for instance, even in the navigation bar there is no actual link, and transitions to other pages are managed via onclick events.

I think having links would be an improvement, especially considering server-side rendered pages.

Do you think this make sense, or do you have specific reasons to not go in this direction?

[WRidder]

I'm wondering about this as well. I'm using server-side rendering in my application, this is something to look into.

[tschaub]

Using anchor elements with href attributes would also improve accessibility and allow people to use browser behavior they are accustomed to (e.g. ⌘-Click to open in a new tab).

[ZMYaro]

+1

[ButuzGOL]

+1

[batazor]

+1

[mewben]

+1

[batazor]

+1

[nikhildaga]

+1

[rhythnic]

+1

[shaurya947]

@ecesena do you think this would still be an issue with the new MenuItem component? See here. The MenuItems can be surrounded by <a>..</a>, no?

[alitaheri]

this is possible with what @shaurya947 suggested.

[inkorange]

I'm attempting to use MenuItems in my LeftNav like this:

        let menuItems = (
            <div>
                <MenuItem primaryText="Doors"           leftIcon={<FontIcon className="material-icons" color={GlobalStyles.default.activeColor}>home</FontIcon>} /></a>
                <MenuItem primaryText="Load"           leftIcon={<FontIcon className="material-icons" color={GlobalStyles.default.activeColor}>home</FontIcon>} />
                <MenuItem primaryText="Notes"           leftIcon={<FontIcon className="material-icons" color={GlobalStyles.default.activeColor}>home</FontIcon>} />
                <MenuItem primaryText="Alerts"          leftIcon={<FontIcon className="material-icons" color={GlobalStyles.default.activeColor}>home</FontIcon>} />
                <MenuItem primaryText="Admin"           leftIcon={<FontIcon className="material-icons" color={GlobalStyles.default.activeColor}>home</FontIcon>} />
            </div>
        );

        return (
            <LeftNav
                ref="leftNav"
                docked={false}
                onChange={this._onLeftNavChange}
            >
                {menuItems}
            </LeftNav>
        )

Wrapping a <a> around a <MenuItem> tag throws a warning validateDOMNesting(...): <a> cannot appear as a descendant of <a>. See MainLayout > a > ... > MenuItem > ListItem > EnhancedButton > a"

If you do a React inspection of the output you get the following.

<a href="/">
    <MenuItem..>
        <ListItem..>
            <div>
                <EnhancedButton..>
                    <a>
                        <TouchRipple ..>
                    </a>
                </EnhancedButton>
            </div>
        </ListItem>
    </MenuItem>
</a>

which having nested <a> elements is offensive.

<MenuItems> generate <a> elements within the Button declaration. What prop is used from MenuItem to populate the href attribute within the generated <EnhancedButton>?

Using a MenuItem object as a prop for LeftNav gets the linking working, but I have not been able to figure out how to add left/right Icons this way.

ie:

let menuItems = [
         { route: '/load_areas/'+ this.state.area + '/doors', text: 'Doors' },
         { route: '/load_areas/'+ this.state.area + '/trailer_loads', text: 'Load' },
         { route: 'notes', text: 'Notes' },
         { route: 'alerts', text: 'Alerts' },
         { route: 'admin', text: 'Admin' }
         ];

<LeftNav
                ref="leftNav"
                docked={false}
                menuItems={menuItems}
                onChange={this._onLeftNavChange}
            />

[alitaheri]

this is a separate issue, please open one, so we can label it and add it to milestones, tnx 😁