Register menu locations in your theme so the site owner can assign menus from Appearance, Menus. Then print each location with wp_nav_menu().

Step 1: register the locations

function lotgrafix_register_menus() {
    register_nav_menus( array(
        'primary' => __( 'Primary Menu', 'lotgrafix' ),
        'footer'  => __( 'Footer Menu', 'lotgrafix' ),
    ) );
}
add_action( 'after_setup_theme', 'lotgrafix_register_menus' );

Step 2: print the menu in your template

<?php
if ( has_nav_menu( 'primary' ) ) {
    wp_nav_menu( array(
        'theme_location'  => 'primary',
        'container'       => 'nav',
        'container_class' => 'lotgrafix-nav',
        'menu_class'      => 'lotgrafix-menu',
        'depth'           => 2,
        'fallback_cb'     => false,
    ) );
}
?>

Useful arguments

• theme_location: the location name registered in step 1.
• container: the wrapper tag, nav, div or false for none.
• menu_class: the class of the ul element.
• depth: how many submenu levels to show. Use 0 for all.
• fallback_cb: set to false to print nothing when no menu is assigned.
• items_wrap: customize the ul wrapper markup.

Add a class to all menu links

function lotgrafix_menu_link_class( $atts, $item, $args ) {
    if ( 'primary' === $args->theme_location ) {
        $atts['class'] = 'lotgrafix-menu-link';
    }
    return $atts;
}
add_filter( 'nav_menu_link_attributes', 'lotgrafix_menu_link_class', 10, 3 );

Add a class to the menu items

function lotgrafix_menu_item_class( $classes, $item, $args ) {
    if ( 'primary' === $args->theme_location ) {
        $classes[] = 'lotgrafix-menu-item';
    }
    return $classes;
}
add_filter( 'nav_menu_css_class', 'lotgrafix_menu_item_class', 10, 3 );

Style the active page

WordPress adds current-menu-item automatically to the active item, so you only need the CSS.