jqwidgets-framework/demos/react/app/menu/centermenuitems/app.js

jQWidgets is an advanced jQuery, Angular, React, ASP .NET MVC, Custom Elements and HTML5 UI framework.

import React from 'react';
import ReactDOM from 'react-dom';

import JqxMenu from '../../../jqwidgets-react/react_jqxmenu.js';

class App extends React.Component {
    componentDidMount() {
        this.centerItems();

        window.onresize = () => {
            this.centerItems();
        }
    }
    centerItems() {
        let menu = document.getElementsByClassName('myMenu')[0];
        let firstLiElement = menu.children[0].children[0];
        firstLiElement.style.marginLeft = '0px';

        let totalLiWidth = 0;
        let borderOffset = 2;

        let liElements = menu.children[0].children;

        for (let i = 0; i < liElements.length; i++) {
            totalLiWidth += liElements[i].offsetWidth + borderOffset;
        }

        let menuWidth = menu.offsetWidth;
        let newMargin = (menuWidth / 2) - (totalLiWidth / 2);
        firstLiElement.style.marginLeft = '' + newMargin + 'px';
    }
    render() {
        let menuInnerHtml =
            `
                <ul>
                    <li><a href='#Home'>Home</a></li>
                    <li>Solutions
                        <ul style='width: 250px;'>
                            <li><a href='#Education'>Education</a></li>
                            <li><a href='#Financial'>Financial services</a></li>
                            <li><a href='#Government'>Government</a></li>
                            <li><a href='#Manufacturing'>Manufacturing</a></li>
                            <li type='separator'></li>
                            <li>Software Solutions
                                <ul style='width: 220px;'>
                                    <li><a href='#ConsumerPhoto'>Consumer photo and video</a></li>
                                    <li><a href='#Mobile'>Mobile</a></li>
                                    <li><a href='#RIA'>Rich Internet applications</a></li>
                                    <li><a href='#TechnicalCommunication'>Technical communication</a></li>
                                    <li><a href='#Training'>Training and eLearning</a></li>
                                    <li><a href='#WebConferencing'>Web conferencing</a></li>
                                </ul>
                            </li>
                            <li><a href='#'>All industries and solutions</a></li>
                        </ul>
                    </li>
                    <li>Products
                        <ul>
                            <li><a href='#PCProducts'>PC products</a></li>
                            <li><a href='#MobileProducts'>Mobile products</a></li>
                            <li><a href='#AllProducts'>All products</a></li>
                        </ul>
                    </li>
                    <li>Support
                        <ul style='width: 200px;'>
                            <li><a href='#SupportHome'>Support home</a></li>
                            <li><a href='#CustomerService'>Customer Service</a></li>
                            <li><a href='#KB'>Knowledge base</a></li>
                            <li><a href='#Books'>Books</a></li>
                            <li><a href='#Training'>Training and certification</a></li>
                            <li><a href='#SupportPrograms'>Support programs</a></li>
                            <li><a href='#Forums'>Forums</a></li>
                            <li><a href='#Documentation'>Documentation</a></li>
                            <li><a href='#Updates'>Updates</a></li>
                        </ul>
                    </li>
                    <li>Communities
                        <ul style='width: 200px;'>
                            <li><a href='#Designers'>Designers</a></li>
                            <li><a href='#Developers'>Developers</a></li>
                            <li><a href='#Educators'>Educators and students</a></li>
                            <li><a href='#Partners'>Partners</a></li>
                            <li type='separator'></li>
                            <li>By resource</li>
                        </ul>
                    </li>
                    <li>Company
                        <ul style='width: 180px;'>
                            <li><a href='#About'>About Us</a></li>
                            <li><a href='#Press'>Press</a></li>
                            <li><a href='#Investor'>Investor Relations</a></li>
                            <li><a href='#CorporateAffairs'>Corporate Affairs</a></li>
                            <li><a href='#Careers'>Careers</a></li>
                            <li><a href='#Showcase'>Showcase</a></li>
                            <li><a href='#Events'>Events</a></li>
                            <li><a href='#ContactUs'>Contact Us</a></li>
                            <li><a href='#Become an affiliate'>Become an affiliate</a></li>
                        </ul>
                    </li>
                </ul>
            `;
        return (
            <JqxMenu className='myMenu'
                width={'90%'} height={30} template={menuInnerHtml}
            />
        )
    }
}

ReactDOM.render(<App />, document.getElementById('app'));