Clear region with menu's per url cache

Question

I have a region with menus, a menus displays depending on the url example if on the about page(sitename/about-us), display about menu and links as a sub menu.

It works, but the problem is after navigating through the site a couple of times, the region caches. is the anyway i can clear the regions cache on page reload.

I tried the below in my .theme

   /**
   *  Implements hook_preprocess_HOOK() for block.html.twig.
   */
  function themename_preprocess_block(&$vars) {
    //the menu block id name in the region
    if ($vars['derivative_plugin_id'] == 'submenu') {
      //-- This stops the block being cache in drupal 8
      $vars['#cache']['max-age'] = 0;

    }
  }

also tried

  /**
   * Implements hook_preprocess_HOOK() for block.html.twig.
   */
  function themename_preprocess_block(&$vars) {
    if ($vars['derivative_plugin_id'] == 'theme-block-branding') {
      //-- This stops the block being cache in drupal 8
      $vars['#cache']['max-age'] = 0;
    }
  }

not sure what steps I can follow to achieve the above

Answer 1

Add code below:

class MYCUSTOMBLOCK extends BlockBase {
  public function build() {
    return array(
      '#markup' => '', // the content of your block
    );
  }
  public function getCacheMaxAge() {
   return 0; // No caching gets applied here
  }
}